盒子模型
刚开始接触html的时候对于盒模型的理解还不够清晰，弄清楚后其实发现特别的简单，其实就是想象一个房间，里面放一张床，这个床的位置，通过magin和padding来自己定位。
margin也就是外边距，容器到外边的距离
padding也就是内边距，容器到容器内的距离
一个完整的盒子是由外边距加内边距加容器加边框的距离
先上个经典图
举个栗子
<div class="container">内容</div> .container{
width: 200px;
height: 100px;
background-color: yellow;
text-align: center;
line-height: 100px;
padding: 10px;
margin: 40px;
display:inline-block;
}
整个内容区算在灰绿色加绿色里面，padding撑开了容器的大小，margin就是外面橘色的距离
整个盒子的大小就是
宽度：外边距40px *2+内边距10px *2+内容宽200px = 300px；
高度：外边距40px *2+内边距10px *2+内容高100px = 200px；
其实还是很好理解的