前端知识点之怪异盒模型和标准盒模型

怪异盒模型和标准盒模型

盒子模型

盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。它允许我们在其它元素和周围元素边框之间的空间放置元素。

目前盒模型主要分为两大门派：标准盒模型和怪异盒模型。

标准盒模型

标准盒模型又称W3C标准盒模型，其中标准盒模型的 width 等于 content 的宽度，标准盒模型的 height 等于 content 的高度。

标准盒大小计算公式：width(content) + padding + border + margin

怪异盒模型

怪异盒模型又称IE盒子模型，其中怪异盒子模型的 width 等于 content + padding + border 的宽度，怪异盒子模型的 height 等于 content + padding + border 的高度。

怪异盒大小的计算公式：width(content + padding + border) + margin

CSS设置盒子模型

在 css3 中添加了对盒模型设置的属性 box-sizing，可以根据需要自由调整

属性值	描述
content-box	默认值，盒子宽度高度等于content（标准盒模型）。
border-box	盒子宽度高度等于content + padding + border（怪异盒模型）。
padding-box	盒子宽度高度等于content + padding。
inherit	从父元素中继承 box-sizing 属性的值。

从父元素中继承 box-sizing 属性的值。 |