每一个可见的HTML元素都是一个盒子，一个盒子由外到内可以分成四个部分：margin（外边距）、border（边框）、padding（内边距）以及content（内容）。我们可以发现margin、padding和border都是CSS属性，它们三是用来控制盒子的边距边框，而content就是描述HTML元素的内容。
盒子的大小指的是盒子的宽度和高度，在这里我们需要注意的是它的宽度和高度不是我们所理解的width和height属性，而是（默认情况下）：
盒子宽度计算公式：内容宽度(width) + 左填充(padding-left) + 右填充(padding-right) + 左边框(border-left) + 右边框(border-right) + 左边距(margin-left) + 右边距(margin-right)
盒子高度计算公式：内容高度(height) + 上填充(padding-top) + 下填充(padding-bottom) + 上边框(border-top) + 下边框(border-bottom) + 上边距(margin-top) + 下边距(margin-bottom)
margin
盒子的外边框，完全透明，开发者只可以设置它的边距，它包含四条边：
margin-top：上边距
margin-bottom：下边距
margin-left：左边距
margin-right：右边距
margin属性可以多种设置方式：
// 1\. 设置一个值，表示四条边距相等
margin: 20px;
// 2\. 设置两个值，表示第一个设置的是上下边距，第二个设置的是左右边距
margin: 20px 30px;
// 3\. 设置三个值，第一个值设置上边距，第二个值设置左右边距，第三个值设置下边距
marign: 20px 30px 40px;
// 4\. 设置四个值，分别表示上、右、下、左四边不同的边距
margin: 20px 30px 40px 50px;
margin_trbl.png
padding
盒子的内边距（填充），不是只能完全透明的，可以设置背景颜色和图片，与margin类似，它包含了上右下左四边，开发者可以单独设置每一条边的边距：
padding-top：上边距
padding-bottom：下边距
padding-left：左边距
padding-right：右边距
padding: 20px 30px 40px 50px;
padding_trbl.png
border
表示盒子的边界，可以设置成可见的，各式各样的，同样的它和上边的margin和padding一样，都是可以设置多边属性的：
border-top：上边界
border-bottom：下边界
border-left：左边界
border-right：右边界
border-top: 2px solid red;
border-bottom: 3px solid black;
border-left: 4px dotted blue;
border-right: 5px dashed orange;
border_tblr.png
除此之外，我们还可以设置边界的宽度、样式以及颜色，它的简写属性就是border：
border-width：边界宽度
border-style：边界样式
border-color：边界颜色
/* border: 10px solid green; */
/* 可以分开写成： */
border-width: 10px;
border-style: solid;
border-color: green;
border_wsc.png
