盒模型
就是就是浏览器为页面中的每个 HTML 元素生成的矩形盒子。
每个元素盒子的属性可以分成三组
1、边框（border），可以设置边框的宽窄、样式和颜色。
2、内边距（padding），可以设置盒子内容区与边框的间距。
3、外边距（margin），可以设置盒子与相邻元素盒子的间距。
一个盒子有 4条边
因此与边框、 内边距和外边距相关的属性也各有 4 个，分别是上（top）、右（right）、下（bottom）、 左（left）。
CSS 为边框、内边距和外边距分别规定了简写属性
让你通过一条声明就可以完成设定。在每个简写声明中，属性值的顺序都是上、右、下、左，想象一下顺时针旋转。
使用简写属性，则可以简写为这样：
{ margin:5px 10px 12px 8px; }
推荐大家把下面这条规则作为样式表的第一条规则：
* {
margin:0;
padding:0;
}
这条规则把所有元素默认的外边距和内边距都设定为零。把这条规则放到样式表里后，所有默认的外边距和内边距都会消失。然后，你可以为那些真正需要外边距的元素再添加外边距。
叠加外边距
垂直方向上的外边距会叠加，假设有 3 个段落，前后相接，而且都应用以 下规则：
p {
height:50px;
border:1px solid #000;
backgroundcolor:#fff;
margin-top:50px;
margin-bottom:30px;
}
由于第一段的下外边距与第二段的上外边距相邻，你自然会认为它们之间的外边距是 80 像素（50+30），但是你错啦！它们实际的间距是 50 像素。像这样上下外边距相遇时，它们就会相互重叠，直至一个外边距碰到另一个元素的边框。就上面的例 子而言，第二段较宽的上外边距会碰到第一段的边框。也就是说，较宽的外边距决定两个元素最终离多远，没错——50 像素。这个过程就叫外边距叠加。
注意
叠加的只是垂直外边距，水平外边距不叠加。对于水平相邻的元素，它们的水平间距是相邻外边距之和。
