关于CSS3的box-sizing属性

CSS3中有一个属性叫box-sizing，该属性取不同的值会决定box高宽不同的计算方式。

1、content-box(默认值)

这也就是最常规的计算方式，某个box的高等于它的height＋padding＋border＋margin，宽也是同理，以下不再赘述。

2、border-box

当取值为border-box时，这个box的高就等于它的height＋margin了，也就是说该box的height是由content部分的height和padding以及border共同组成的了，换言之，padding和border不再向外延伸，而是往里边挤。

3、padding-box

padding计算入width内。（兼容性似乎存在问题，最新版chrome和safari也不能生效）

兼容性：ie8+浏览器支持content-box和border-box；ff则支持全部三个值。

最后贴张对比图（给两个盒子同时设置了200px的宽度和高度还有20px的padding值）：