css盒模型分为标准盒模型和IE盒模型。

可以看出标准模型的宽度和高度就是content的宽、高，不包含padding和border，IE模型的的宽和高是包含padding和border的

可以通过如下方式设置两种盒模型:

box-sizing:content-box; 标准盒模型

box-sizing:border-box; IE盒模型

下面是没设置box-sizing为border-box和设置了box-sizing为content-box的两个对比

不难发现，没有设置box-sizing: border-box;时div的宽度被padding和border撑大了。因此我们在开发时使用box-sizing: border-box;就是为了在设置有padding值和border值的时候不把宽度撑开。