众所周知，CSS将每一个元素视作一个盒子，以便更好地划分彼此的区域，如下图所示。
每个盒子又由以下几部分组成：
- 外边距
margin - 边框
border - 内边距
padding - 内容区
content
两种盒模型
在不同宽度的计算方法下，诞生了两种不同的盒模型——标准盒模型与替代盒模型。
标准盒模型
在标准盒模型下，我们通过CSS设定盒子的width属性实际上是设置盒子内容区的宽度，并非实际宽度。标准盒模型的实际宽度由内容区宽度+内边距+边框组成，高度也是如此。
.box {
width: 350px;
height: 150px;
margin: 25px;
padding: 25px;
border: 5px solid black;
}
/*此时实际宽度为350px + 25px + 25px + 5px + 5px = 410px*/
/* 内容区 左右内边距 左右边框 */
替代盒模型
在替代模型下，我们通过CSS设定的width直接是盒子的实际宽度，而此时内容区的宽度则为实际宽度 - 内边距 - 边框，高度也是如此。
.box {
box-sizing: border-box; /*通过这个来改变盒模型*/
width: 350px;
height: 150px;
margin: 25px;
padding: 25px;
border: 5px solid black;
}
/*此时内容区的宽度为350px - 25px - 25px - 5px - 5px = 290px*/
外边距
刚刚两个盒模型和外边距都没啥关系，因为外边距并不作为盒子的实际宽度组成部分之一作为考察。但他也是一个相当重要的属性，控制着两个元素间的距离。
例如在这里，我们为.box设置的margin不仅将第一个box与边框分开，同时也使其与第二个box分隔。这个时候我们可以注意到其实两个box之间除了第一个box的右边距还有第二个box的左边距，也就是说此时两者的水平间距是由两者的外边距之和决定的。
然而到了垂直方向下，又是另一种情况了。
此时的两者的垂直间距又变成了只由第二个box的外边距组成。真的吗？再来看看第一个box。
噢，原来不是，只是两者的外边距重叠了。这是CSS中的叠加外边距的特性。这个特性决定了，在正常文档流中，两个盒子的垂直外边距等于两者外边距较长的那一个的值。例如
.box {
width: 100px;
height: 100px;
margin: 20px;
border: 1px solid #ddd;
}
.box2 {
margin-top: 100px;
}
这个时候两个box的垂直距离就成了box2的100px，不是20px也不是20px+100px。
