什么是盒模型？【标准盒子模型和怪异盒子模型的区别？】

什么是盒子模型？

在我们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时，采用怪异模式进行计算