怪异盒模型和标准盒模型
盒子模型
盒模型本质上是一个盒子,封装周围的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 属性的值。 |