盒子模型

盒子模型

1. 简介

用来装页面上的元素的矩形区域。CSS 中的盒子模型包括 IE 盒子模型和标准的 W3C 盒子模型。

box-sizing（有3 个值）：border-box（IE盒子模型），padding-box，content-box（标准盒子模型）

2. 标准盒子模型

3. IE盒子模型

也叫怪异盒子模型

4. 区别

从图中我们可以看出，这两种盒子模型最主要的区别就是 width 的包含范围，在标准的盒子模型中，width 指content 部分的宽度，在 IE 盒子模型中，width 表示 content + padding + border 这三个部分的宽度，故这使得在计算整个盒子的宽度时存在着差异：

标准盒子模型的盒子宽度：左右 border + 左右 padding + width

IE 盒子模型的盒子宽度：width

在 CSS3 中引入了 box-sizing 属性，

box-sizing: content-box; 表示标准的盒子模型，

box-sizing: border-box; 表示的是 IE 盒子模型

最后，前面我们还提到了，box-sizing: padding-box。这个属性值的宽度包含了左右 padding + width，也很好理解性记忆，包含什么，width 就从什么开始算起。