CSS3 box-sizing:border-box的好处

无论如何改动border，margin与padding的值，都不会导致box总尺寸发生变化。

建议学习和设置此属性：

*{box-sizing:border-box}

 不改变box-sizing的话，边框计算结果如下

width(宽度) + padding(内边距) + border(边框) = 元素实际宽度
height(高度) + padding(内边距) + border(边框) = 元素实际高度

改变box-sizing的话，边框计算结果如下
如果当我们定义一个容器的 box-sizing 属性为 border-box 时（表达式：br{box-sizing:border-box}），那么我们创建一个和上段中相同设置的 <div> 容器时，
那么他的最终宽度即为 100px, 那么它的内容部分（content）的有效宽度变成了 100px-2*10px-2*10px =60px; 所以你会得到一个你预期大小的盒子容器，但是只是被压缩了内容部分尺寸而已，但是对于整体布局而言益处颇多。

width(固定宽度) + padding(内边距)*0 + border(边框)*0 = 元素实际宽度
height(固定高度) + padding(内边距)*0 + border(边框)*0 = 元素实际高度

所以要合理利用好这个属性，这个属性十分重要。

 延伸学习->