盒子模型:
1: 
什么是盒子:网页中的一种元素 块级元素中的一种

盒子模型中包含的内容:content(内容) border(边框) padding(内边距) margin(外边距) width height <div>
2:设置盒子的边框样式(边框颜色，粗细，线条样式，设置顺序) 顺时针顺序
边框颜色:
border-top-color:上边框的颜色
border-right-color:右边框颜色
border-bottom-color:下边框的颜色
border-left-color:左边框的颜色

设置边框颜色的顺序:上右下左(顺时针顺序)

边框粗细:
border-top-width 上
border-right-width 右
border-bottom-width 下
border-left-width 左

border-width:上右下左

边框线条样式: border-style:上右下左
solid 实线
dashed 虚线
none:没有样式
dotted:点线

3:盒子中内外边距
外边距:margin 盒子1元素和盒子2元素的距离
margin-top:上外边距
margin-right:右外边距
margin-bottom:下外边距
margin-left:左外边距

上下左右外边距: 设置顺序 上右下左(顺时针)


内边距:盒子内容(Content)-->border的距离(上右下左的内边距) 上右下左
padding-top:上内边距
padding-right:右内边距
padding-bottom:下内边距
padding-left:左内边距

上右下左(顺时针)

4:设置尺寸，圆角边框，盒子阴影

盒子尺寸:box-sizing: 默认值(content-box)

border-box:把盒子的总宽度=padding left padding-right +border-weight
盒子的总高度=padding top+padding bottom+border-weight

content-box:把盒子的总宽度=content width+padding left padding-right +border-weight
盒子的总高度=content height+padding top+padding bottom+border-weight

圆角边框:border-radius 顺时针顺序设置(左上，右上，右下，左下 顺时针顺序) 
盒子中心点到原有角的距离(圆的半径)

[]代表可以省略
盒子阴影:box-shadow:[inset,color]x轴偏移量 y轴偏移量 阴影半径(粗细) 默认是边框的外部阴影
如果使用了inset，则变为内部阴影