CSS3 box-sizing属性

简介

box-sizing 属性定义了应该如何计算一个元素的总宽度和总高度。

// box-sizing 有三种属性
box-sizing: content-box|border-box|inherit;

---

content-box ( 默认值 - 标准盒模型 )

宽度和高度分别应用到元素的内容框。
在宽度和高度之外绘制元素的内边距和边框。

如果你设置一个元素的宽为100px，那么这个元素的内容区会有100px 宽，并且任何边框和内边距的宽度都会被增加到最后绘制出来的元素宽度中。

width = 内容的宽度 = 100px
height = 内容的高度 = 100px

border 和 padding 的变化，不影响内容的实际宽高(100px)
但整体宽高会跟随变化（100px + 10px*2 + 5px*2 = 130px）

.

---

border-box ( 推荐设置 - IE盒模型 )

为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。
通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。

如果你将一个元素的width设为100px，那么这100px会包含它的border和padding，内容区的实际宽度是width减去(border + padding)的值。大多数情况下，这使得我们更容易地设定一个元素的宽高。

width = border + padding + 内容的宽度 = 100px
height = border + padding + 内容的高度 = 100px

border和padding的变化，会影响内容的实际宽高( 100px - 10px*2 - 5px*2 = 70px)
但整体宽高不变(100px)

.

---

inherit

规定应从父元素继承 box-sizing 属性的值。

---

MDN建议

对于新的web站点，你可能希望首先将box-sizing设置为border-box，如下所示：

* { box-sizing: border-box; }

这使得处理元素大小的工作变得容易得多，并且通常消除了在布局内容时可能遇到的许多陷阱。然而，在某些情况下，你应谨慎使用这个属性。例如： 你正在编写一个将由其他人使用的共享组件库，如果他们网站的其余部分没有设置此值，他们可能会发现很难使用你的组件库。

---

浏览器兼容性