CSS入门6-盒模型

（注1：如果有问题欢迎留言探讨，一起学习！转载请注明出处，喜欢可以点个赞哦！）

（注2：更多内容请查看我的目录。）

1. 简介

还记得开幕式的例子吗？假设网页是一个队伍，那么元素就是其中的一个个队员。每个队员有高有矮，有胖又瘦，队员之间的距离有远有近，组成一个理想的队形。网页中的元素是什么形状呢？这里再举个例子，不知道大家有没有见到过快递柜？现在快递员经常会将你的快递放到快递柜中通知你去取。元素就像快递柜的格子一样。假设你购买了一双鞋，鞋盒外面包裹有一层快递盒，鞋盒是实际你当时购买的内容，和快递盒的距离是内边距，盒子外表面到隔壁柜子外表面的距离就是外边距了。可以看下面这张图：

快递柜

上图中，我们只考虑快递纸箱会有厚度，鞋盒以及柜子的厚度忽略不计，并且元素盒模型不像现实中的快递一样有重力属性，底部是可以不必紧贴在一起的。我们来看一下抽象后的元素盒模型。

盒模型

不同部分的说明如下：

• margin(外边距) - 清除边框外的区域，外边距是透明的。
• border(边框) - 围绕在内边距和内容外的边框。
• padding(内边距) - 清除内容周围的区域，内边距是透明的。
• content(内容) - 盒子的内容，显示文本和图像。

2. 各执一词的W3C标准盒模型与IE盒模型

设想你是一位快递运输员，需要在你的货车撞上需要运输的货物。W3C快递公司的是按货物的实际大小计价的，你只知道货物的实际大小，还需要根据包裹货物的盒子厚度，盒子与实际货物的间隙来计算该快递包裹的实际占据空间。而当你精疲力尽摆好货物以后，顾客要求为他的贵重物品填充更多的保护泡沫，更换更厚的纸箱，你将要重新计算它的大小，重新摆放。想想都觉得麻烦。

而IE快递公司让收件员收货的时候将快递打包，根据包裹的大小计价，并告知你包裹的宽高，你只需要关注这个宽高以及包裹之间的距离即可，不用管里面包裹的物品，纸箱的厚度，或者纸箱和实际货品的间隙有多大。

你会选择就职于哪家公司呢？是的，被人吐槽的IE快递公司在这里的设计更为符合常理。我们来看一下两种盒模型的详细说明。

2.1 W3C标准盒模型

W3C标准盒模型

从上图可以看出，对于W3C盒模型：

总宽度 = width + padding + border + margin

总高度 = height + padding + border + margin

更具体来讲应该是如下公式：

总宽度 = width + padding-left +border-left + margin-left + padding-right + border-right + margin-right

总高度 = height + padding-top + border-top + margin-top + padding-bottom + border-bottom + margin-bottom

2.2 IE盒模型

IE盒模型

从上图可以看出，对于IE盒模型：

总宽度 = width + margin

总高度 = height + margin

更具体来讲应该是如下公式：

总宽度 = width + margin-left + margin-right

总高度 = height + margin-top + margin-bottom

3. box-sizing属性介绍

从第2节内容我们看到，IE盒模型使用起来较W3C标准盒模型更为方便。因此，CSS3中提供了一个新的属性，box-sizing，来控制和模型的表现形式。box-sizing有三个取值，分别是content-box，border-box和inherit。

（注：其实还有一个padding-box，width和height属性包括内容和内边距，但是不包括边框和外边距。只有Firefox实现了这个值，它在Firefox 50中被删除。）

1. content-box 默认值，表现形式同W3C标准和模型。
2. border-box 表现形式同IE盒模型，常用值，经常在css-reset中设置。
3. inherit 规定应从父元素继承box-sizing属性的值。

参考

深入理解盒模型

CSS 盒子模型

css 盒子模型理解

想要清晰的明白（一）： CSS视觉格式化模型|盒模型|定位方案|BFC

CSS 布局_1 盒模型

学会使用box-sizing布局

box-sizing

盒子模型