1、边框
1、CSS的三大重点：盒子模型、浮动、定位
2、 盒子模型：内容、边框、外边距、内边距
3、 网页布局本质：拼接盒子的过程 div +CSS
4、 边框
(1) 、边框属性：边框厚度、边框的颜色、边框的线条样式
(2) 、边框厚度：border-top-width（上）
(3) 、边框的颜色： border-top-color: blue;（上）
(4) 、边框的线条样式：border-top-style: solid;
① 、实线 solid
② 、虚线 dashed
③ 、点线 dotted
④ 、双实线 double
(5) 、综合设置：border:1px solid red;
(6) 、边框会影响盒子的尺寸
2、内边距
1、定义：内边距：盒子中内容与边框之间的距离
2、用法：
(1) 、上内边距 padding-top: 20px;
(2) 、左内边距 padding-left: 15px;
(3) 、下内边距 padding-bottom: 25px;
(4) 、右内边距 padding-right: 10px;
(5) 、属性值个数不同
① 四个属性值 :上、右、下、左 padding: 50px 40px 30px 10px;
② 三个属性值： 上、左右、下 padding: 50px 40px 30px;
③ 两个属性值： 上下、左右 padding: 50px 20px;
④ 一个属性值： 上下左右 padding: 50px;
3、外边距
1、定义：盒子的边框与其他元素或者浏览器边缘之间的距离
2、使用：
① 上外边距 margin-top: 100px;
② 左外边距 margin-left: 80px;
③ 下外边距 margin-bottom: 50px;
④ 右外边距 margin-right: 200px;
3、综合设置
(1) 四个属性值：上 右 下 左 margin: 90px 70px 50px 20px;
(2) 三个值：上、左右、下margin: 90px 70px 20px;
(3) 两个值：上下、左右margin: 90px 50px;
(4) 一个值：上下左右 margin: 50px;
4、总结：
(1) div盒子默认有8px的外边距（只值距离浏览器的
(2) 盒子的外边距不会影响盒子的尺寸
5、水平居中
(1) text-align:center:内容水平居中，可以让行内元素和行内块元素水平居中，不可以让块状元素居中
(2) margin:auto:块状元素水平居中,必须设置宽度
4、外边距合并
1、相邻块元素垂直外边距的合并
① 定义：当上下相邻的两个块元素相遇时，如果上面的元素有下外边距margin-bottom，下面的元素有上外边距margin-top，则他们之间的垂直间距不是margin-bottom与margin-top之和，而是两者中的较大者 ,这种现象被称为相邻块元素垂直外边距的合并（也称外边距塌陷）
2、嵌套关系的块元素的外边距合并
① 定义：对于两个嵌套关系的块元素，如果父元素没有上内边距及边框， 则父元素的上外边距会与子元素的上外边距发生合并， 合并后的外边距为两者中的较大者
3、避免嵌套关系外边距合并的方法
① 给父元素添加边框
② 给父元素添加内边距
③ 给父元素添加overflow属性
5、盒子阴影
1、定义：向div元素添加影子
2、使用：四个属性值 水平阴影 垂直阴影 影子模糊距离 影子的颜色
box-shadow: 60px 30px 10px #ff0000;