在你知道如何使用box-sizing之前，你必须了解常规的盒子模型和怪异的盒子模型（IE盒子模型）。我们都知道盒子模型从里到外主要包括：content、padding、border、margin。如下图所示：两种盒模型的宽度标准盒模型的宽度=content怪异盒模型的宽度=content+padding*2+border*2即content宽度为100px的div和padding为10px，border为1px，margin为10px，那么在标准盒模型分析下，它的width=100px，也就是内容的宽度；在怪盒模型的分析下，它的width=100px+1px*2+10px*2=122px。box-sizing的作用了解了这两个盒子模型之后，我们来介绍一下box-sizing，它有三个取值：content-box、border-box、inherit。inherit就是继承父元素的box-sizing值，这里不做介绍。cent-box是用标准框模型的方式来分析当前框，即此时框的宽度=内容的宽度border-box是用陌生框的方式来分析框model，此时width=content+padding*2+border*2讲到这里就很清楚了，box-sizing的作用就是指定当前的box是如何解析的。使用场景当然，box-sizing在某些场景下是非常有用的。比如我们要制作一个内边距为10px，边框为2px的div，最后包含一个边框宽度为100px的div。前面的方法是计算内容宽度width=100px-10px*2-2px*2=76px。这种方法没有问题，但是有些繁琐，把宽度的计算交给开发者显然是不合适的。这时候我们就可以交给电脑来完成了，这需要box-sizing来完成。这里通过设置div的box-sizing为border-box，我们可以简单的设置width为100px，剩下的padding和border按照给定的值一一填充即可完成所有工作，节省了人为计算内容广度的过程，减少了计算量，降低了错误率。为什么不这样做呢？
