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

css盒模型本质是一个盒子，它由边距、边框、填充和实际内容组成。盒模型能够让我们在其他元素和周边元素边框之间的空间放置元素。

标准盒与怪异盒的区别在于他们的总宽度的计算公式不一样。

标准模式下总宽度=width+margin（左右）+padding（左右）border（左右）；
怪异模式下总宽度=width+margin（左右）（就是说width已经包含了padding和border值）。

标准模式下如果定义的DOCTYPE缺失，则在ie6、ie7、ie8下汇触发怪异模式。当设置为box-sizing:content-box时，将采用标准模式解析计算，也是默认模式；当设置为box-sizing:border-box时，将采用怪异模式解析计算；

标准盒模型

怪异盒模型(IE)

转载链接：https://www.jianshu.com/p/7dadcc458410