1. 盒模型的组成:
内容区域: width height
内边距区域: padding
边框区域: border
外边距区域: margin
内边距：
padding-top:上内边距;
padding-right:右内边距;
padding-bottom:下内边距;
padding-left:左内边距;
padding:四个方向;
padding:上下 左右;
padding:上 左右 下;
padding:上 右 下 左;
【注】没有负数，没有auto
会撑大元素的大小
外边距:
margin-top:上外边距;
margin-left:左外边距;
margin-bottom:下外边距;
margin-right:右外边距;
margin:四个方向;
margin:上下 左右;
margin:上 左右 下;
margin:上 右 下 左;
【注】有负数，有auto 表示自适应
不会撑大元素的大小
margin常见的bug: 垂直方向的外边距相遇会重合
边框：
border:边框大小 边框形态 边框颜色;
border-top:上边框大小 形态 颜色;
border-top-width:上边框大小;
border-top-style:上边框形态;
border-top-color:上边框颜色;
三角形:
width:0;
height:0;
border:30px solid transparent;
border-top-color:red;
盒模型大小计算:
W = width + 左右border + 左右padding
H = height + 上下border + 上下padding
