因为span标签是 inline "内联标签"；对内联标签设置宽度是无效的；
 
==========================================================================
 
可以通过属性 display : inline-block ；
 
将span标签变为 "内联-块标签"（介于块级元素和内联元素之间），这样就可以设置其宽度了

 
我有以下问题：
 
我有div包含其他元素，我尝试使其宽度依赖于内容。我也限制这个div的最大宽度。我在CSS中使用min-width和max-width，但似乎min-width不起作用。无论内容是什么，div的宽度始终为max-width值。CSS min-width属性不起作用
 
例子：
 
我想有白格(即主格，我是在谈论)严格围绕在它的形式，而不会在左侧和右侧空的空间。我给了表格样式max-width:500px来表明，即使内容很小，主格保持不变。
 
HTML
 
CSS
 
.gInnerBox{
 
position: relative;
 
background-color: #fff;
 
opacity: 0.9;
 
padding: 10px 10px 10px 10px;
 
box-shadow: -5px -5px 20px #000, 5px 5px 20px #000;
 
-moz-box-shadow: -5px -5px 20px #000, 5px 5px 20px #000;
 
-webkit-box-shadow: -5px -5px 20px #000, 5px 5px 20px #000;
 
border: 1px solid #000;
 
border-radius: 20px;
 
-moz-border-radius: 20px;
 
-webkit-border-radius: 20px;
 
}
 
.sInnerBoxMain{
 
max-width: 1000px;
 
min-width: 500px;
 
margin-left: auto;
 
margin-right: auto;
 
top: 50px;
 
}
 
2011-11-24
 
vizzdoom

大多数最开始接触css这门语言应该都是从width这个属性开始的，然而却很少有人真正理解这个属性。
width从英文意思上就可以看出是宽度的意思，而网页布局中我们是离不开这个属性的。但是width具体作用的细节又是如何呢？
1.width：auto;
当我们没有为元素设置宽度的时候，这是宽度表现就是为width：auto.这个就是width属性的默认值。而width:auto;又是什么意思呢？这个不同元素表现形式也就不同。
（1）像div,p这种元素的宽度默认是最大程度撑满父级容器的，如下图所示：


（2）而对于有浮动，绝对定位,table元素或inline-block元素则表现为适当的收缩，如下图所示：


（3）在父元素宽度不够显示时会超出容器限制，如下图所示：


则可以看出在没有其它影响流的属性（如上面定位，浮动，字体限制）存在的时候，大部分块级元素表现为霸道总裁，最大程度的撑开。而行内元素或者行内块级元素表现为小鸟依人，适当的收缩。
2.width:100%;
（1）在正常流的情况下我们是不需要设置width:100%;如果设置了反而会出现不好的情况，如下图：




当我们不为子元素设置宽度时表现为自动撑大，而设置100%后就超出父元素了！
（2）当我们为子元素设置了定位属性这个时候就需要width：100%帮忙了。


当我们设置了绝对定位或固定定位后，宽度就自然缩小了


width:100%后宽度相对于最近具有定位元素的祖先元素计算


而当设置绝对定位时，同时设置left和right的时候，这时宽度又表现为最大程度适应父元素了。


3.外部尺寸与内部尺寸
（1）外部尺寸
外部尺寸表示元素尺寸由外部元素决定，当我们往一个杯子里面倒水的时候，这是水的宽度就是由杯子的宽度决定的。像div,p这类大部分块级元素的宽度就是这种表现形式。
（2）内部尺寸
内部尺寸表示元素尺寸由内部元素决定，我们想象一个紧闭的塑料袋，当我们没用往里面放东西的时候，此时袋子的宽度应该为0，而当我们往里面放置物体时就撑开了袋子，袋子就有了和放置的物体一样的宽度。inline-block行内块级元素就是典型的内部尺寸元素，而且浮动元素和绝对定位元素同意属于内部尺寸元素。
（3）格式化宽度
当我们为绝对定位同时添加left和right属性后，此时绝对定位宽度又变成相对最近具有定位元素的祖先元素的宽度进行计算。
而还有一种情况就是当我们为inline-block元素内文字设置white-space时，此时元素宽度表现为最大宽度，也就是文字多宽，那么元素就有多宽。
4.盒子模型
（1）标准盒子模型
宽度=内容的宽度（content）+border+padding+margin
（2）低版本IE盒子模型
宽度=内容的宽度（content+border+padding)+margin
（3）box-sizing
用来控制元素的盒子模型的解析模式，默认为content-box，即设置元素的height、width属性指的是content部分的高、宽；
border-box,IE传统盒子模型，设置元素的height、width属性指的是content+border+padding部分的高、宽；
本文章参考张鑫旭的《CSS世界》

 
为什么要使用 height 和 width 属性

您是否见过当文档加载时其内容会显示不规律的移动。之所以会这样，是因为浏览器为了能够显示每一个加载的图像，而不断地重新调整页面的布局。浏览器通过下载并解析出图像的宽度和高度来决定图像的大小，然后就会在显示窗口中留出一个相应的矩形空间。然后浏览器就会调整页面的显示布局，以便把图像插入到显示当中。这同时也告诉我们，图像是独立的文件，它与源文件都分别是独立加载的。

但是这不是一种最有效的显示文档的方法，因为浏览器在显示相邻的以及后面的文档内容之前，必须要检查每一个图像文件，并计算它们的屏幕空间。这可能会给文档的显示带来非常大的延迟，从而打断用户的阅读。

对于创作者来说，一种更为有效的方法是通过 <img> 标签的 height 和 width 属性来指定图像的尺寸。这样的话，浏览器在下载图像之前就为其预留出了位置，从而可以加速文档的显示，还可以避免文档内容的移动。这两个属性都要求是整数值，并以像素为单位来表示图像尺寸。这两个属性在 <img> 标签中出现的次序并不重要。
height 和 width 属性的问题

虽然 <img> 标签的 height 和 width 属性能够改善性能并让你实现一些小技巧，但在使用它们时还是有一些棘手的负面效果。即使用户已经关掉了自动下载图像的功能，浏览器还是要把为图像预留的空间以指定的尺寸显示出来。而这样留给读者的通常是一个空的框架，里面有一个毫无意义的图标，表示这是放置图像的位置。这时页面将看上去非常糟糕，就像根本没有完成一样，并且大部分内容都毫无用处。如果不用这些指定的尺寸，则浏览器将只是在文本中放置一个图像图标，这样显示中至少还有一些文字可以阅读。

对于这个问题我们还没有解决方案，只能强调一点，就是去使用 alt 属性和一些描述性文字，这样读者至少知道这里缺少的是什么东西。我们还是建议您使用这些尺寸属性，因为我们鼓励一切能够改善网络性能的行为。
 
转载于:https://www.cnblogs.com/bigdesign/p/4386488.html