菜鸟教程解释：所有HTML元素可以看作盒子
1.普通盒子模型：
margin（外边距）：清除边框外的区域，外边距是透明的，不包含在background属性中。
border（边框）： 围绕在内边距和内容外的边框。
padding（内边距）：清除内容周围的区域，内边距是透明的，包含在background属性中。
content（内容）：盒子的内容，显示文本和图像或者其他的H5标签。
对这个盒子模型设置width和height属性，即给content设置宽高属性。
这个盒子的宽度 = width+padding+border+margin；
这个盒子的高度 = height+padding+border+margin；
2.特殊盒子模型：有box-sizing属性的盒子模型
box-sizing 属性定义如何计算一个元素的总宽度和总高度，主要设置是否需要加上内边距(padding)和边框（border）。
例如，假如需要并排放置两个带边框的框，可通过将 box-sizing 设置为 "border-box"。这样就可以让浏览器呈现出带有指定宽度和高度的框，并把边框和内边距放入框中。
默认情况下，元素的宽度(width) 和高度(height)计算方式如下：
width(宽度) + padding(内边距) + border(边框) = 元素实际宽度
height(高度) + padding(内边距) + border(边框) = 元素实际高度
Eg：
（1）原图：
（2）给aaa加上40px的margin：
橙色部分就是margin：
（3）给aaa加上30px的padding：
绿色部分是padding，是有背景颜色的：
