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

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