width:100%(width100%和auto)

width：auto和width：100%的区别

width:auto；会将元素撑开至整个父元素width，但是会减去子节点自己的margin，padding或者border的大小。

width:100%；会强制将元素变成和父元素一样的宽，并且添加额外的空间到这个元素的width上。就是因为这个，会导致很多问题。

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

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

width:100%指什么？

当父容器里有 绝对定位 的子元素时，子元素设置width:100%实际上指的是相对于父容器的padding+content的宽度。

当子元素是非绝对定位的元素时width:100%才是指子元素的 content 等于父元素的 content宽度 查看范例 。

正确使用"width:100%"

"width:100%"是一个很常用的属性，当对子元素这样设置的时候，子元素的宽度就等于父元素的宽度。

但是，这句话还不够准确。子元素的宽度指什么？子元素内容区域的宽度还是包括padding/border的总宽度？父元素的宽度指什么？父元素内容区域的宽度还是包括padding/border的总宽度？

这就是这篇博客的主要议题。我们直接来看例子：

结果：

由图可知：

父元素内容区域宽度：600px，padding：100px，border：100px，总宽度：1000px;

子元素内容区域宽度：600px，padding：50px，border：50px，总宽度：800px。

由此可知，子元素设置宽度的百分比是指 子元素内容区域 相对于 父元素内容区域 ；同时，正是由于子元素设置宽度的百分比是指子元素内容区域相对于父元素内容区域，所以造成了 子元素溢出了父元素 。

在以上示例中，我们没有设置box-sizing属性，因此box-sizing默认为content-box。现在，我们为元素设置 box-sizing:content-box ，再看看结果：

结果：

由图可知：

父元素内容区域宽度：200px，padding：100px，border：100px，总宽度：600px;

子元素内容区域宽度：0px，padding：50px，border：50px，总宽度：200px。

由此可知，当设置 box-sizing:border-box 时，子元素设置宽度的百分比是指 子元素整个盒子区域 相对于 父元素内容区域 。

由于个人水平有限，博客错误之处，烦请指正！