width:auto; 和 width:100%;的不同

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样式的副作用有深刻的认识。

原文地址：http://headertofooter.com/post/80699461723/the-difference-between-width-auto-and-width-100