盒模型

1. 默认情况下， 在盒子模型中，我们设置的宽度都是内容宽度，不是整个盒子的宽度。而整个盒子的宽度是：（内容宽度 + padding宽度 + border宽度 + margin宽度）之和。这样我们改四个中的其中一个，都会导致盒子宽度的改变
2. 如果父容器宽度不变，我们手动增大margin、border或padding其中一项的宽度值，都会导致内容宽度的减少。极端情况下，如果内容的宽度压缩到不能再压缩了（例如一个字的宽度），那么浏览器会强迫增加父容器的宽度
3. box-sizing:border-box
4. 切记，margin有一个特性——纵向重叠，如下图，<p>的纵向margin是16px，那么两个<p>之间纵向的距离按常理来说应该是 16 + 16 = 32px，但是答案仍然是 16px。因为纵向的margin是会重叠的，大的会把小的“吃掉”