CSS的width:100%和width:auto区别

CSS的width:100%和width:auto区别

一、   问题

前段时间在调整树结构的时候，发现如果树的节点名称比较长的话在IE6下则不会撑开外面的元素，导致节点的名称只显示了一半，同时图标和名称换行显示了，但是在IE8和IE9下则显示正常。定位到问题后，最终发现是下面的属性导致的，如下图红色所致，把width的值设置为auto后即可解决问题：

.TreeView,.TreeView ul{

padding:0px 0px 0px  19px;

list-style:none;

margin:0px 0px;

width:100%;/*这里修改为auto*/

background:url(./trstree-default-line.gif)  repeat-y 0px  center ;

}

二、   结论

[1] width:100% 并不包含margin-left  margin-right的属性值，直接取其父容器的宽度加上含margin-left /margin-right的值。如果设置了margin那新的width值是容器的宽度加上margin的值。（细心观察）就会发现加了  margin相对应的边就会多出设置的空白。而且会多出横向滚动条因为宽度已经超出了屏幕的范围。(这条相对于父容器是body)。

[2] width:auto包含margin-left/margin-right的属性值。其值包含margin-left /margin-right的值。width:auto总是占据整行！！！这其中margin的值已经包含其中了（也就是一整行）如果要设置margin的值那就用一整行然后减去margin的值就得到了现在的宽度了。减去的这个值就是相应边得空白。显著的特征是这个没有横向滚动条出现也就是宽度没有增加。

[3] 在IE6下显示不正常，但是在IE8和IE9下显示正常，可能是IE8和IE9对width:100%的解析与IE6不同所致，但是两者对width:auto的解析是一致的。

width:auto；会将元素撑开至整个父元素width，但是会减去子节点自己的margin，padding或者border的大小。
width:100%；会强制将元素变成和父元素一样的宽，并且添加额外的空间到这个元素的width上。就是因为这个，会导致很多问题。

使用width:100%永远都不是一个好主意。这个属性容易让人产生你正在定义一个元素可视大小，其实，你是在对这个元素的状态做了巨大的改变。

块元素会填满其父元素的整个width，因为块元素默认的是width:auto;的。

See the Pen jGgIu by liqian (@liqian) on CodePen.

下面的例子里，黑色的边框（border）代表容器父元素。蓝色和绿色表示的是一个有着红色边框，边框宽为20个像素的子节点。（border:20px solid red;），不同点在于，蓝色的子节点是width:auto;，绿色的是width:100%;的。

See the Pen H2F - March 25, 2014 #1 by liqian (@liqian) on CodePen.

 

可以看到绿色的子节点伸出了父元素。这是因为绿色的子节点设置了width:100%;使得自己的width变得和父元素一样大小，但是这个width不包含子节点自己边框的大小。这样边框就到父元素外面了；

 

 

 

对于padding和margin也是同样的作用。

See the Pen H2F - March 25, 2014 #2 by liqian (@liqian) on CodePen.

无论多的宽度是padding，margin或者border，width:auto;都不会将子节点撑破父元素。

可以看出，width:100%是将盒模型中的content拉伸得和父元素一样，而width:auto;是将这个盒模型拉伸得和父元素一样。

很多CSS问题的解决办法不是添加更多的CSS，而是去掉那些有问题的CSS，这就得需要对类似width这样的CSS样式的副作用有深刻的认识。

1）width: 100%并不包含margin-left/margin-right的属性值，直接取其父容器的宽度+margin-left/margin-right的值。如果该div设置了margin值，则该div的width值=容器的宽度+margin值。（细心观察）就会发现加了margin值后，相对应的边就会多出设置的空白。如果其父容器是body，则还会多出横向滚动条，因为它的宽度已经超出了屏幕的范围，如果该div你设置了overflow-x:auto，则在超出范围时，也会出现滚动条。

 

2)width:auto在设置width值时会包含margin-left/margin-right的属性值。width:auto总是占据整行！！！这其中margin的值已经被包含在其中了（也就是一整行）如果要设置margin的值，那就用一整行width-margin的值=设置的元素的宽度了。减去的这个值就是相应边的空白。该种情况下，显著的特征就是这个没有横向滚动条出现，即宽度没有增加。

 

总之，

width:100%：设定对象的宽度占父元素的100%(不论设定元素的margin值为多少)

width:auto：是根据设定对象的实际大小而自适应宽度（考虑设定元素的margin值得大小）

 

针对元素A

1.A是容器，希望A把它的父容器充满，就是100%

2.A是容器，希望A根据容纳的元素大小变换自己的大小，就用auto

 

3.A不是容器，宽度不知，需要显示完全，用auto

4.A不是容器，宽度不知，可能大于所在容器宽度，希望填满，用100%

 

案例如下：