CSS3 的 box-sizing 属性 总结

box-sizing 属性是允许以特定的方式定义匹配某个区域的特定元素。

参考W3CSchool 手册：

　　　　　　　　　　　　　　　　　　　　　　　　　语法：　box-sizing: content-box|border-box|inherit;

值	描述
content-box	这是由 CSS2.1 规定的宽度高度行为。 宽度和高度分别应用到元素的内容框。 在宽度和高度之外绘制元素的内边距和边框。
border-box	为元素设定的宽度和高度决定了元素的边框盒。 就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。 通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。
inherit	规定应从父元素继承 box-sizing 属性的值。

 

不使用 CSS3 box-sizing 属性，默认为content-box

默认情况下，元素的宽度与高度计算方式如下：

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

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

这就意味着我们在设置元素的 width/height 时，元素真实展示的高度与宽度会更大(因为元素的边框与内边距也会计算在 width/height 中)。

属性值设为content-box时

 

如果在元素上设置了 box-sizing: border-box; 

则 padding(内边距) 和 border(边框) 也包含在 width 和 height 中:

 

 

提示：一个标准 w3c 盒子模型的范围包括 margin、border、padding、content，并且 content 部分不包含其他部分。

 IE标准盒子模型(怪异盒模型)的范围包括margin、content。