所有的html元素，我们都可以看作一个盒子
盒子包含：content（内容），padding（内边距），border（边框），margin（外边框），如下图所示
-
我们定义的css宽度width／高度height，指的是实际内容区域的宽高
-
背景色的作用区域为实际内容区域+ padding+border
-
边框围绕在padding和content四周，边框也有自己的宽度
-
margin为与四周元素的距离，透明的
-
整个元素占据的宽度＝margin左右尺寸＋border左右尺寸＋padding左右尺寸＋content的width
-
整个元素占据的高度＝margin上下尺寸＋border上下尺寸＋padding上下尺寸＋content的height
如下：
-
.a没有设置margin、padding、border，默认为0，只设置了宽高，因此a占100px＊100px
-
.b宽高为100px，padding为100px，因此.b背景的宽度＝两边padding 共200px＋width 100px＝300px，背景高度同样为300px
-
.b拥有1个10px宽的边框
-
.b距离.a由margin决定，为100px
<style>
.a,.b{
color: white;
}
.a{
width: 100px;
height: 100px;
background-color: red;
}
.b{
width: 100px;
height: 100px;
background-color: red;
padding: 100px;
border: 10px solid #2aabd2;
margin: 100px;
}
</style>
<div class="a"></div>
<div class="b"></div>
