标准盒模型和怪异盒模型的区别

盒模型一共有两种：标准盒模型和怪异盒模型

一、W3C标准盒子模型

我们可以看到，在标准盒模型下，内容区域的width和height是元素本身的width和height。

在标准模式下，块元素的总宽度= width + padding(左右) + border(左右) + margin(左右)

二、IE标准(怪异)盒模型

而怪异盒模型显而易见的区别就是，元素的width和height除了content区域外，还包含padding和border。

此时块元素的总宽度= width + margin(左右)（即width已经包含了padding和border值）

补充：

当设置为box-sizing:content-box时，将采用标准模式解析计算，这也是默认模式；
当设置为box-sizing:border-box时，将采用怪异模式解析计算。