本文讲述 padding / border 的设置后是否对 width 有影响，width 等于 auto 与 100% 的区别
CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框 和 外边距 的方式。
概述
那么 css 属性中width = ？呢
在标准的w3c的规定中 width 的真实值等于 content 区域的值，不加上 padding 与 border 的值
这虽然与我们常规的理解是有所偏差，因为现实角度理解一个盒子宽度应该是 = 内边距 + 边框 + 内容空间宽度，但是标准就是标准你必须遵守；
而标准有时候也是有问题的，在IE5/6中 width的值 = content的width + padding的width + border的width，所以开发的时候要注意 ；
术语:
- padding : 内边距；
- margin ： 外边距；
- border ： 边框；
box-sizing
这是一个css3中新增的一个属性，可以用来控制，width的值是否包括边框和内边距，它有两个值：
- content-box ：代表 width属性 和 height属性 的值是不包括 内边距 和 边框值的，它是默认属性；
- border-box ：代表 width属性 和 height属性 的值是包括 内边距 和 边框 值的；
width : auto 和 width : 100% 的区别
- 在box-sizing 为 content-box 的时候：
- width : auto 时，width = 父级的 width - 自己的 padding - 自己的 border；
- width ：100% 时，width = 父级的 width；
- 在box-sizing 为 border-box 时：两个并无区别
ps：这上面所指父级元素的 box-sizing 均为 content-box 的条件下