什么是盒子模型？
在我们HTML页面中，每一个元素都可以被看作一个盒子，而这个盒子由：内容区（content）、填充区（padding）、边框区（border）、外边界区（margin）四部分组成。
对于盒模型，分为标准盒模型和怪异盒模型两种。
标准（W3C）盒模型
在标准模式下，一个块的总宽度 = 内容的width + padding(左右) + border(左右) + margin(左右)
怪异盒模型(IE盒子模型)
在怪异模式下，一个块的总宽度 = 内容的width + margin(左右)（这里的width包含了padding(左右)和border(左右)的值）
两种模式的转换（通过box-sizing）
box-sizing中比较常用的两个属性值为 content-box 和border-box ，它可以改变盒子模型的解析计算模式，可以参考上面的代码案例。
- 当设置
box-sizing:content-box时，采用标准模式进行计算，默认就是这种模式 - 当设置
box-sizing:border-box时，采用怪异模式进行计算