深入理解盒模型

盒子模型是什么

在 HTML 中，所有的文档元素被表示为一个元素盒子，这个盒子描述了元素在文档布局中所占的空间大小，并且相互影响。而确定这些盒子的尺寸、属性和位置是渲染引擎的目标。

直接上图：

打开 Chrome 浏览器，按下 F12 ，可以在 Elements->Styles 下找到这个盒子模型图。

盒子模型从内向外，依次是内容区（即 width 和height），padding， border，以及 margin。

盒子模型的分类以及区别

在CSS中盒子模型被分为两类，一是 W3C 标准模型，二是 IE 怪异盒模型。

这两种盒子模型的主要区别是对盒子宽度和高度的定义不同：

W3C 标准模型规定元素的宽高为内容区尺寸，即 Chrome 浏览器中蓝色部分（见上图）。

而IE怪异盒模型则规定元素的宽高为可见区域尺寸，即 width = contentWidth + padding + border, height = contentHeight + padding + border。（注：这里使用 contentWidth 和 contentHeight 表示内容区的宽高，实际上并没有这两个属性）。

现假设一个盒子：

margin: 20px; padding: 10px; border: 1px; content: 100px*100px;

现在分别使用两种盒子模型来计算盒子所占据的空间和盒子的宽：

类别	W3C 标准模型	IE 怪异盒模型
盒子需要占据的空间	100+20x2+10x2+1x2=162	100+20x2=140
盒子的宽	100	100-10x2-1x2=78

上表只计算的是水平尺寸，垂直尺寸计算方式一致。

box-sizing

现浏览器对元素的表现多基于 W3C 标准盒模型，这样其实很不方便。所以CSS3中新增了box-sizing 属性，这个属性用于预先定义盒模型的表现形式。

值：content-box | border-box | padding-box |inherit

初始值：content-box
应用于：块级元素和替换元素

继承性：无

注意：

1. IE7并不支持此属性。关于兼容性可以查看 Can I use?
2. 只用 FF 浏览器支持 padding-box 。

通常好的做法是在 CSS Reset 中预先定义：

* {
    box-sizing: border-box;
}

参考

深入理解盒模型

盒子模型-MDN

关于

我的GitHub

本文收藏于 Weekly-FEG