重拾css(8)——盒子模型

1.引言

从这一节开始，咱们就进入本系列的第三部分——css呈现。本部分将描述css在页面的几种布局和呈现的特性。包括两类：文字、块。
第一类——文字。这部分相对比较简单一些，例如设置字号、字体、颜色、背景色、是否加粗等。重点的地方在于设置字体、设置行高、文字相关的距离都尽可能用相对值（em）。另外还有一个重点，就是web端最流行的字体库fontAwesome，可参见《请用fontAwesome代替网页icon小图标》，这里就再也不重复去讲了。

2.什么是“盒子”

padding，border和margin，即内边距、边框、外边距，它们三者就构成了一个“盒子”。好比收到的快递，原本买了一个小小的iphone，收到的倒是那么大一个盒子。由于iphone白色包装盒与iphone机器之间有间隔层（内边距），iphone白色盒子有厚度，虽然很薄（边框），盒子和快递箱子之间还有一层泡沫板（外边距）。这就是一个典型的盒子。

如上图，真正的内容就是这些文字，文字外围有10px的内边距，5px的border，10px的外边距。

3.盒子的宽度

3.1 设置固定宽度的状况

在盒子模型中，咱们设置的宽度都是内容宽度，不是整个盒子的宽度。而整个盒子的宽度是：（内容宽度 + padding宽度 + border宽度 + margin宽度）之和。这样咱们改四个中的其中一个，都会致使盒子宽度的改变。这对咱们来讲不友好。

　　不要紧，这个东西不友好早就有人发现了，并且已经解决，下文再说。

3.2 充满父容器的状况

默认状况下，div的display:block，不设置固定宽度时，宽度会充满整个父容器。
可是别忘记，这个div是个盒子模型，它的整个宽度包括（内容宽度 + padding宽度 + border宽度 + margin宽度），是整个的宽度充满了父容器。
问题就在这里。若是父容器宽度不变，咱们手动增大margin、border或padding其中一项的宽度值，都会致使内容宽度的减小。极端状况下，若是内容的宽度压缩到不能再压缩了（例如一个字的宽度），那么浏览器会强迫增长父容器的宽度。这可不是咱们想要看到的。

3.3 包裹内容的状况

这种状况下比较简单，盒子的宽度将随着内容宽度的增长而增长。

4.再看盒子的宽度

前面提到，为盒子模型设置宽度，结果只是设置了内容的宽度，这个不合理。如何解决这一问题？答案就是：box-sizing:border-box

如上图，div设置了box-sizing:border-box;以后，盒子宽度300px就变为（内容宽度 + padding宽度 + border宽度）之和（不包括margin宽度），这样就比较符合咱们的实际要求了。
建议你们在为系统写css时候，第一个样式是：

大名鼎鼎的bootstrap也把box-sizing:border-box加入到它的 * 选择器中，咱们为何不这样作呢？

5.margin的纵向重叠

切记，margin有一个特性——纵向重叠，以下图，<p>的纵向margin是16px，那么两个<p>之间纵向的距离按常理来讲应该是 16 + 16 = 32px，可是答案仍然是 16px。由于纵向的margin是会重叠的，大的会把小的“吃掉”（能够本身去实验）。

6.用div画“三角”

“三角”在平常的网页中是很常见的，例如百度首页：

你固然可使用背景图片、fontAwesome来实现这一效果，可是你也能够用div来实现这一效果，很简单，并且能够封装通用：

原理很简单：只让一侧border显示，另外三侧都设为透明。