box-sizing属性用于修改盒模型的width属性和height属性的意义，该属性一共有3个值

• content-box：width和height属性对应内容区的宽度和高度。这是默认的渲染方式。
• border-box：width和height属性对应内容区加上内边距区和边框的宽度和高度。这是老版本IE在怪异模式下的渲染方式。
• inherit：继承

下面是设置相同的width、padding、border-width属性，不同的box-sizing属性时渲染差异的示例。

See the Pen box-sizing example by xingzhi (@xingzhi) on CodePen.

丢弃繁琐的计算

对于一个块级框，可视的渲染区域是内容区、内边距区和边框。

当box-sizing为content-box时，width的值需要通过渲染区域宽度的值减去内边距和边框的宽度计算得到，当padding或者/和border-width改变时还需要重新计算并且设置width的值。

当box-sizing为border-box时，width值就是渲染区域宽度的值，我们不需要计算内容区的宽度，而且当padding或者/和border-width改变时，也不需要计算内容区的宽度。

没有了这些繁琐的计算，阳光都更灿烂了有木有。

设置box-sizing的正确姿势

要使用border-box进行布局，首先要重置所有元素的box-sizing属性，我们第一时间想到的就是使用全局选择器将所有元素的box-sizing属性都设置为border-box，但是更好的方式是重置html元素的box-sizing属性，而其他属性使用继承机制。

1
2
3
4
5
6
html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

这种设置方法的一个优势在于，当页面中的某一个部分需要使用content-box进行布局时，只需要在最外层元素上设置box-sizing属性就可以了。

兼容性

box-sizing属性的兼容性见下图：

只要不支持IE8以下的浏览器，那就使用把box-sizing设置为border-box吧，让自己的生活更好一些。