精华内容
下载资源
问答
  • 1.不理解为什么,padding:0应该是一个人畜无害的属性啊 2.怎么办,既不可能去修改公用的css样式,也不可能不引入这个css文件 css不存在"解除一个属性定义",只能"复写这个属性定义" 那么应该将padding属性设置成什么...
  • VB控件属性使用大全

    2011-12-15 12:02:34
    控件具有很多相同的属性,如标识控件名称的Name属性、标识控件标题的Caption属性有效属性Enable、可见属性Visible、标识控件位置和大小的Top、Left、Width、Height、属性、定义背景色的BackColor属性、定义前景色...
  • | width| 列宽 | number | - | 140 | | minWidth | 最小列宽 | number | - | - | | filter | 过滤器名(只有配置在全局的filter才有效) | string | - | - | | render | 处理数据的函数,接收行...
  • span设置固定宽度

    千次阅读 热门讨论 2013-12-04 22:34:34
    <span> 标签是被用来组合文档中的行内元素。相信一般的网页设计师来讲是非常熟悉的朋友了,使用相当频繁,但我们往往很少SPAN设定样式,一般也没什么必要,... CSS中的width属性并不总是有效的,如果对象是inlin


            <span> 标签被用来组合文档中的行内元素。相信对一般的网页设计师来讲是非常熟悉的朋友了,使用相当频繁,但我们往往很少对SPAN设定样式,一般也没什么必要,大多数都留给DIV老朋友了。 

        在做"善良公社"项目时,用到了SPAN,因为是用来实现放块效果,所以给它定义了固定宽度,本以为胸有成竹的事,可执行网页时发现设定的宽度没有效果,让我郁闷了几分钟,看似很简单的样式定义尽然是无效。后来网上搜索了相关资料,是这么解释的:CSS中的width属性并不总是有效的,如果对象是inline对象,width属性就会被忽略。FirefoxIE原来是遵循了标准才这样做的。 

        原因知道后,解决方案也就出来了,添加代码所示: 

    style="width:600px;text-align:left;display:inline-block;"

        效果对比 



     

             下面对<span>标签进行一下详细介绍。

        原始代码:

    <style type="text/css">
        .sc {
            width: 300px;
            list-style: none;
            font-size: 15px;
        }
    
            .sc li {
                list-style: none;
                width: 100%;
                margin: 10px 0px 0px 0px;
            }
    
            .sc span {
                width: 100px;
                text-align: center;
                display: inline-block;
                background: #C00;
                color: #FFF;
            }
    </style>
    <div class="sa">
        <span>张连海</span>
        <span>张 连 海</span>
    </div>
    
    

    
    

    
    

        效果如下:

    一、形如<span>ABC</span>独立行设置SPAN为固定宽度

        方法如下:

    span {width:60px;text-align:center; display:block; }

        测试实例:

    <style type="text/css">
        .sa span {
            width: 100px;
            text-align: center;
            display: block;
            background: #C00;
            margin: 10px 0px 0px 0px;
            color: #FFF;
            font-size: 15px;
        }
    </style>
    <div class="sa">
        <span>张连海</span>
        <span>张 连 海</span>
    </div>

        测试效果:



    二、形如<span>ABC</span>DEF格式行设置SPAN为固定宽度

        方法如下:

    span{width:60px; text-align:center;  display:block;float:left;}


        测试实例:

    <style type="text/css">
        .sb {
            width: 300px;
            list-style: none;
            font-size: 15px;
        }
    
            .sb li {
                list-style: none;
                width: 100%;
                margin: 10px 0px 0px 0px;
            }
    
            .sb span {
                width: 100px;
                text-align: center;
                  display:block;
                float: left;
                background: #C00;
                color: #FFF;
            }
    </style>
    <ul class="sb">
        <li><span>张连海</span>博客</li>
        <li><span>张 连 海</span>欢 迎 光 临</li>
    </ul>

        测试效果:



    三、形如ABC<span>DEF</span>GH格式行设置SPAN为固定宽度

        方法如下:

    span{width:60px; text-align:center; display:inline-block;}

        测试实例:

    <style type="text/css">
        .sc {
            width: 300px;
            list-style: none;
            font-size: 15px;
        }
    
            .sc li {
                list-style: none;
                width: 100%;
                margin: 10px 0px 0px 0px;
            }
    
            .sc span {
                width: 100px;
                text-align: center;
                display: inline-block;
                background: #C00;
                color: #FFF;
            }
    </style>
    <ul class="sc">
        <li>Welcome to <span>张连海</span>博客</li>
        <li>Welcome to <span>张 连 海</span>欢 迎 光 临</li>
    </ul>

        测试效果:



        提示:完美兼容就是把display属性设为inline-block,同时也可兼容前两种情况。


    四、block,inline,inline-block之间区别

        display:block;——类似与DIV标签的宽高边距等属性均可定制的元素特性;

        display:inline;——类似与<a>、<strong>标签的宽高等属性不可定制的元素特性;

        display:inline-block;——“全”可定制属性的元素特性; 


    五、如何设置让SPANfloat:right不换行

        1、如何让<li>AAA<span>BBB</span></li>里头的BBB靠右对齐且不换行?

        如果对span使用float属性,在IE下会导致span换到下一行,Firefox则正常。可以采用下面相对定位方法实现同行且居右对齐,即可实现。

    li {position:relative;}
    li span{position:absolute;right:0px;}


        2、反着写<span>也比较方便

        比如写做<li><span>AAA</span>BBB</li>,这样把AAA放到SPAN里,BBB放到外面。只需要:

    li {text-align:right;}
    li span{float:left;}
    


    展开全文
  • 我是一名web小白,目前现在是一名初中生,这是我第一次写博客,目前,我也是正在自学web前端。这是我定位和浮动元素的个人...2.只margin属性left和right有效,top和bottom无效。padding的上下左右都有效 3....

    我是一名web小白,目前现在是一名初中生,这是我第一次写博客,目前,我也是正在自学web前端。这是我对定位和浮动元素的个人看法,请大家在品论去建议建议,我以后会更努力的。我也不会什么写作文,布局之类的,请大家见解!

    行内元素

    什么是行内元素呢?
    1.无法设置width和height。
    2.只对margin属性left和right有效,top和bottom无效。对padding的上下左右都有效
    3.不能独占一行。
    我们可以用css属性中的display:inline;来转换成行内元素

    行内元素的标签有哪些?

    span,b,i,sub,sup,a,strong,img,input等。

    块元素

    什么是块元素呢?
    1.可以设置width和height。
    2.margin属性的上下左右都有效,padding属性的上下左右也是都有效。
    3.独占一行的。
    我们可以用css中的display:block属性来转换成块级元素。

    块元素的标签有哪些?

    我们最常见的div,p,ul,li,h1到h6,hr,from表单等。

    行内块元素

    什么是行内块元素呢?
    1.可以设置width和height。
    2.不独占一行。
    我们可以用css中的display:inline-block属性来转换成行内块元素。

    已经跟你们说了什么是行内元素,块元素和行内块元素,接下来就可以说浮动和position:absoulte来变成行内块元素。

    <span class="span1">我是个span行内元素</span>
    <div class="div1">我是div块元素</div>
    
    .span1{
                width: 100px;
                height: 100px;
          		background-color: red;
          	}
     .div1 {
                width: 200px;
                height: 200px;
                background-color: blue;
            }
    

    在这里插入图片描述
    因为div是一个块元素,他需要独占一行,所以没有在span后边。
    此时我们对span元素设置的width和height都没有生效。

    接下来我们改变css一下代码。

    .span1{
                position: absolute;
                width: 100px;
                height: 100px;
                background-color: red;
            }
            .div1 {
                width: 200px;
                height: 200px;
                background-color: blue;
            }
    

    在这里插入图片描述
    此时span元素width和height的属性生效了,形成了行内块元素。给span元素定位属性时,span元素脱离了文档流,所以div元素会上去,此时span元素覆盖在div元素上边。

    接下来我们去试一下加浮动会不会是一样的效果。

    在这里插入图片描述
    结果是一样的,变成了行内块元素,仔细的人应该都开出来了,他的文字变了,这种情况我就想问下大家为什么它的文字会环绕这个span元素呢?

    那我就跟大家讲一下浮动属性吧,其实最初的浮动属性用的是图像,出现浮动的目的就是让文本环绕图像,后来css就允许用于其他元素了。

    有许多小伙伴用了浮动或是position:absolute属性后,他的页面效果就不是想像的那样了,很着急,也找不出错误,看了我这篇文章就知道自己的错误了吧。

    感谢大家的阅读,多点点赞,支持支持我,这是我的第一篇文章。
    有兴趣的也可以加Q群1056384633可以讨论讨论。

    展开全文
  • width 或 height 属性设置为 auto 时,mode 属性失效 例子代码(点击展开) export default class ImageExample { palette() { return { width: "654rpx", height: "1000rpx", background: "#eee", views...
  •  10.1.7 滚动范围属性——width、height 208  10.1.8 滚动背景颜色属性——bgcolor 209  10.1.9 滚动空间属性——hspace、vspace 209  10.2 添加背景音乐 211  10.2.1 设置背景音乐——bgsound 211  10.2.2 ...
  • 面向对象的编程语言将客观事物看作具有属性和行为的对象,通过抽象找出同一类对象的共同属性(静态特征)和行为(动态特征),形成类。通过类的继承与多态可以很方便地实现代码重用,大大缩短了软件开发周期,并使得...
  • Step1:先画条蛇

    2020-12-08 22:52:30
    提升性能还是有效的 - <code>update方法:每次的动画循环都会调用的方法,根据基类的速度来更新其位置 - <code>render方法:基类的绘制自身的方法,里面就只有一个绘制镜像的操作,...
  • Web语义化标准解读

    2020-11-25 23:26:16
    所以我们需要更有效的去减少让自己恶心的成本。。 但这些都只是部分客观原因,主要原因在于我们对于Web语义化的理解度不够以及非正确的工作流。 以表现为中心(面向UI) VS 以信息为中心(面向语义) 以表现为...
  • flash shiti

    2014-03-14 10:32:41
    15. 下列那几个属性是flash mx 不建议使用的属性 □ A. scroll □ B. maxscroll □ C. _droptarget □ D. _highquality 16. 下面的语句说法正确的是: □ A. 目前Flash 最新的创作平台是Flash MX,播放插件是Flash ...
  • CuteEditor v 6.6 含KeyGen注册机

    热门讨论 2010-05-31 00:37:45
    这个时候编译的时候应该没有错误了,如果还出现什么windows集成身份验证的错误,那么我们要修改IIS里面的配置,在iis的这个站点的属性里面有个目录安全性,再点身份验证和访问控制的编辑,把集成windows身份验证前面...
  • C++MFC教程

    热门讨论 2013-05-21 13:37:15
    int Width( ) const; 得到宽度 int Height( ) const; 得到高度 CSize Size( ) const; 得到尺寸 CPoint& TopLeft( ); 得到左上角坐标 CPoint& BottomRight( ); 得到右下角坐标 CPoint CenterPoint( ) const; ...
  • 其修改触发组件重新渲染。比如下面这个简单的计数器组件,很好诠释了类组件如何运行:在线 Demo <pre><code>javascript import React from "react"; class App extends React.Component { ...
  • 简便统一的编程方法,由菜单、按钮、提示框等组成的传统人机交互方式产生了很大影响, 在多媒体创作、Web应用、教育软件、软件帮助系统和辅助工具制作等方面,具有广阔的应用前景。 一、 Microsoft Agent技术...
  • Android UI组件实例集合

    热门讨论 2012-09-11 11:31:29
    仿照Path应用首页左下角的Button动画效果写了个简单的Demo,由于数学不好,坐标总是和理想有出入,只是大致实现了动画效果,若果有人能把坐标算,那么修改我的demo就能做成类似Path的那种动画效果!希望大家出点力...
  • 可是一大堆的概念和术语往往让人望而生畏,很多朋友问我:XML到底有什么用,我们是否需要学习它?我想就我个人学习过程的心得和经验,写一篇比较全面的介绍文章。首先有两点是需要肯定的:  第一:XML肯定是未来的...
  • react-native 之布局篇

    2021-01-10 04:06:31
    图片的高清化很重要,如果我的图片大小为100*100 px. 设置宽度为100 * 100. 那在iphone上的尺寸就是模糊的。 这个时候需要的图像大小应该是 100 * pixelRatio的大小 。 <p>react 提供了PixelRatio 的...
  • 对于性能优化需要做些什么以及性能瓶颈是什么,通常我们并不清楚。 不包括那些性能优化有丰富经验的高手 事实上关于Web性能有很多可以优化的点,其中涉及到的知识大致可以划分为几类:度量...
  • 222 使用sizeof操作来判断字符串的有效长度 223 使用sizeof判断数组中字符串的数量 224 访问字符串中的单个字符 225 动态分配字符串 226 示例:反转一个字符串中的字符 第二十三章 函数和变量 227 理解函数 228 理解...
  • 222 使用sizeof操作来判断字符串的有效长度 223 使用sizeof判断数组中字符串的数量 224 访问字符串中的单个字符 225 动态分配字符串 226 示例:反转一个字符串中的字符 第二十三章 函数和变量 227 理解函数 228 理解...
  • 222 使用sizeof操作来判断字符串的有效长度 223 使用sizeof判断数组中字符串的数量 224 访问字符串中的单个字符 225 动态分配字符串 226 示例:反转一个字符串中的字符 第二十三章 函数和变量 227 理解函数 228 理解...
  • 222 使用sizeof操作来判断字符串的有效长度 223 使用sizeof判断数组中字符串的数量 224 访问字符串中的单个字符 225 动态分配字符串 226 示例:反转一个字符串中的字符 第二十三章 函数和变量 227 理解函数 228 理解...
  • powerbuilder

    2013-11-21 17:11:48
    功能定义打印作业使用的字体,每个打印作业PowerBuilder支持八种字体。 语法PrintDefineFont(printjobnumber,fontnumber,facename,height,weight,fontpitch,fontfamily, italic,underline) 参数printjobnumber:用...
  • pDC->StretchBlt(0, 0, rt.Width(), rt.Height(), &dc, 0, 0, hb.bmWidth, hb.bmHeight, SRCCOPY); return TRUE; } HBRUSH CUi4Dlg::OnCtlColor(CDC* pDC, CWnd* pWnd, UINT nCtlColor) { //设置透明背景...
  • 我的收藏页面:依靠Cookie持久化,实现文章的收藏和展示 项目分类:在WanAndroid上发布的项目 网址导航:展示常用的开发网站 搜索功能:输入搜索、搜索推荐、历史搜索等等 关于我们:鸿洋wanAndroid介绍 love...
  • 网上购物系统

    2012-12-18 17:53:18
    ="+id,"","height=200,width=600,l最新网上购物系统 eft=190,top=0,resizable=yes,scrol最新网上购物系统 lbars=yes,status=no,toolbar=no,最新网上购物系统 menubar=no,location=no");} 最新网上购物系统 >在该触发...
  • 功能很强,可以第三方App进行测试,获取屏幕上任意一个APP的任意一个控件属性,并其进行任意操作,但有两个缺点:1. 测试脚本只能使用Java语言 2. 测试脚本要打包成jar或者apk包上传到设备上才能运行。 我们希望...
  • 新版Android开发教程.rar

    千次下载 热门讨论 2010-12-14 15:49:11
    什么是开放手机联盟? 开放手机联盟, Open Handset Alliance :是美国 Google 公司与 2007 年 11 月 5 日宣布组建的一个全球性的联 盟组织。这一联盟将会支持 Google 发布的 Android 手机操作系统或者应用软件,...

空空如也

空空如也

1 2
收藏数 31
精华内容 12
关键字:

width属性对什么有效