先运行下程序看下: <span style='background-color:#336699;width:300px;'>123</span>

输出:123

可以看到 span会自动根据包含的内容来变化宽度

这是因为:对于内联元素(可以是默认即为内联的比如 span 元素，也可以是 display: inline 的元素) width 和 height 只在 IE5.x 下和 IE6 或更新版本的 quirks 模式下触发 hasLayout 。而对于 IE6，如果浏览器运行于标准兼容模式下，内联元素会忽略 width 或 height 属性，所以设置 width 或 height 不能在此种情况下令该元素具有 layout。 zoom 总是可以触发 hasLayout，但是在 IE5.0 中不支持。

具有“layout” 的元素如果同时也 display: inline ，那么它的行为就和标准中所说的 inline-block 很类似了：在段落中和普通文字一样在水平方向和连续排列，受 vertical-align 影响，并且大小可以根据内容自适应调整。这也可以解释为什么单单在 IE/Win 中内联元素可以包含块级元素而少出问题，因为在别的浏览器中 display: inline 就是内联，不像 IE/Win 一旦内联元素拥有 layout 还会变成 inline-block。

解决方法:

<1>去掉ASP.NET页面的W3C标准声明(不推荐):

去掉:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <span style='background-color:#336699;width:300px;'>123</span>

<2>推荐:

如果设置display:block，width属性生效，但是此时的span跟div一样了。 如果设置display:inline-block，则span并列在同行，而且width属性生效。

元素display属性的常见值说明：

block：块对象的默认值。将对象强制作为块对象呈递，为对象之后添加新行。 inline：内联对象的默认值。将对象强制作为内联对象呈递，从对象中删除行。(内联)

《CSS权威指南》中文字显示:任何不是块级元素的可见元素都是内联元素。其表现的特性是“行布局”形式，

这里的“行布局”的意思就是说其表现形式始终以行进行显示。

比如，我们设定一个内联元素border-bottom:1px solid #000;时其表现是以每行进行重复，每一行下方都会有一条黑色的细线。

假如是块级元素那么所显示的的黑线只会在块的下方出现。 inline-block：将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内。 non：隐藏对象。与 visibility 属性的hidden值不同，其不为被隐藏的对象保留其物理空间。

内联(display:inline;)元素不能设置宽高，因为内联属于行布局，其特性是在一行里进行布局，所以不能被设定宽高。 <span style='background-color:#336699;width:300px;display:inline-block;'>123</span>

输出:123

<3>如果设置float:left | right,width属性生效.

(浮动)他使得指定元素脱离普通的文档流而产生的非凡的布局特性。并且FLOAT必需应用在块级元素之上，也就是说浮动并不应用于内联标签。或者换句话来说当应用了FLOAT那么这个元素将被指定为块级元素。 <span style='background-color:#336699;width:300px;float:left;'>123</span>

输出:123

css中 Span 元素的 width 属性无效果原因及多种解决方案相关推荐

  1. Span元素的 width属性 无效果原因及解决方案

    先运行下程序看下: <span style='background-color:#336699;width:300px;'>123</span> 输出:123 可以看到 spa ...

  2. CSS中伪元素、伪类选择器和字体、文本相关属性

    CSS中伪元素.伪类选择器 伪元素选择器 伪元素选择器只能针对CSS中已有的伪元素起作用. CSS提供的伪元素选择器有如下几个: :first-letter:对指定对象的第一个字符起作用. :firs ...

  3. CSS中的颜色值与颜色属性

    文章目录 颜色模型 CSS颜色值的类型 颜色名称 rgb[a] rgba的新写法 CSS元素的透明度 hex十六进制值 hsl[a] 颜色值关键字 transparent currentColor C ...

  4. 在 CSS 中隐藏元素的 10 种方法

    在CSS中很多隐藏元素的方法,但这些方法的可访问性.布局.动画.性能和事件处理的方式有所不同. 动画: 一些CSS隐藏元素的方法一般是全有或者全无,元素要么是完全可见,要么是完全不可见,并且没有中间状 ...

  5. CSS中position的几个属性值

    CSS中position的几个属性值 position的四种取值 :     static:static定位就是不定位,出现在哪里就显示在哪里,这是默认取值,只有在你想覆盖以前的定义时才需要显示指定 ...

  6. 5种css隐藏元素的方法_在CSS中隐藏元素的10种方法

    5种css隐藏元素的方法 There are multiple ways to hide an element in CSS, but they differ in the way they affe ...

  7. 怎样使用css让矩形出现圆角,CSS中设置元素的圆角矩形

    圆角矩形介绍 在CSS中通过border-radius属性可以实现元素的圆角矩形. border-radius属性值一共有4个,左上.右上.左下.右下. border-radius属性值规则如下:第一 ...

  8. HTML中td元素的nowrap属性

    HTML中td元素的nowrap属性表示禁止单元格中的文字自动换行. 但使用时要注意的是,td元素中nowrap属性的行为与td元素的width属性有关.如果未设置td宽度,则nowrap属性起作用的 ...

  9. 如何使用jquery修改css中带有!important的样式属性

    <div class="test">使用jquery修改css中带有!important的样式属性</div> 外部样式为: div.test{width: ...

最新文章

  1. AMS重要的数据结构解析（一）：ActivityRecord
  2. 【深度学习入门到精通系列】nnU-Net论文解析
  3. Net平台下的分布式缓存设计
  4. nyist -- 组队赛（二）
  5. Yii游客允许查看页面设置
  6. 匿名函数、冒泡排序，二分法， 递归
  7. 前端学习（2772）：uni图片预览
  8. 一个非常有用的辅助类 -- 阈值类的实现
  9. Xcode 输入时 搜索代码块前面标记的字母含义
  10. CSS颜色表示的几种方式
  11. 基于SEIR的传播动力学模型
  12. 思科模拟器配置静态路由
  13. 2018.11.05._PYTHN_DJANGO_CLASS 144~CLASS147
  14. spring cloud-熔断（六）
  15. 企业经营模拟（ERP沙盘、ERP电子沙盘）分析总结报告与心得分享
  16. b560主板怎么样 b560主板支持的cpu
  17. 明势资本黄明明：创新与世界，下一代基础软件的中国突围之路
  18. 神经网络常用术语（Updating）
  19. 三叶草新冠候选疫苗在全球2/3期临床试验结果显示对德尔塔变异株的保护效力为79%...
  20. 如何实现在on ethernetPacket中自动回复NDP response消息

热门文章

  1. 恒温控制系统单片机仿真c语言,基于51单片机的恒温控制系统
  2. java ini文件_java应用监控之prometheus、node export、grafana安装和配置
  3. matlab 捕食者和猎物,[转载]与“猎物-捕食者模型”有关的模拟题
  4. win7计算机找不到脚本文件夹,win7系统开机出现无法找到脚本文件怎么办
  5. python中如何计算集合的长度_Python如何计算序列长度 python dataframe中元素如何统计？...
  6. datatable更新到mysql_.NET_使用DataTable更新数据库(增,删,改)，1、修改数据复制代码 代码如 - phpStudy...
  7. oracle 实例多一些的书,Oracle+Database+11g+PLSQL编程实战（书+源码）
  8. layerconfirm 自动关闭问题 没有阻塞问题_iPhone XS Max 如何关闭软件自动更新？
  9. 用RtlAdjustPrivilege来调整进程权限(VB6.0代码)
  10. 简单而常用的shell 命令