CSS最重要的三个概念是浮动、定位和盒模型
盒模型
css中每个元素都是一个盒模型，盒模型有两种模式，第一种是标准模型，另一种是IE的传统模型
标准模式
2017-05-23_145615.png
div{
width: 40px;
height: 40px;
padding: 10px;
margin-bottom: 20px;
border: 10px solid #000;
}
这里我设置了一个div其中 内容区域是40*40的部分 padding是内边距 border 是边框 margin是外边距
在标准模式下设置的宽高是内容区域的宽高
传统模式
div{
width: 80px;
height: 80px;
padding: 10px;
margin-bottom: 20px;
border: 10px solid #000;
box-sizing:border-box;
}
这里可以使用box-sizing中这个属性模拟传统模式
2017-05-23_150347.png
这里div的高度和宽度设置的是80，但是内容区域却是 40*40，是因为这个模式下的宽高不是内容区域的宽高，而是内容区域 + 内边距 + 边框的高度的总和，所以这里内容区域的宽高被压缩了
大家可以用这代码去测试看看
盒模型的外边距叠加
当两个或多个垂直外边距相遇时，它们将形成一个外边距，这个外边距的高度等于两个发生叠加外边距高度中的较大者
*{
margin: 0;
padding: 0;
}
body{
margin: 10px;
}
.first{
width: 150px;
height: 50px;
padding: 10px;
margin-bottom: 20px;
border: 10px solid #000;
}
.second{
width: 150px;
height: 40px;
padding: 10px;
margin-top: 40px;
border: 10px solid #000;
}
<div class="first">aaaa</div>
<div class="second">bbbb</div>
这里写了两个div，一个设置margin-bottom是20px 一个设置margin-top是40px 这两个垂直接触的div之间margin的距离最后是40px
这里可以看出，上下的margin已经合在一起了，并且最后合并之后的margin是较大的那个margin
