盒子模型的边框、内边距、外边距、阴影

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;