css盒子模型 即内外边距与边框

盒子模型

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)     、边框会影响盒子的尺寸

5、：内边距

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;

5、外边距

（1）定义：盒子的边框与其他元素或者浏览器边缘之间的距离

注意：div盒子默认有8px的外边距（只值距离浏览器的）

结论：盒子的外边距不会影响盒子的尺寸

（2）

①     四个属性值 :上、右、下、左   margin: 50px 40px 30px 10px;

②      三个属性值： 上、左右、下  margin: 50px 40px 30px;

③      两个属性值： 上下、左右 margin: 50px 20px;

④       一个属性值： 上下左右 margin: 50px;

1. text-align:center:内容水平居中，可以让行内元素和行内块元素水平居中，不可以让块状元素居中     

 margin:auto:块状元素水平居中,必须设置宽度

1.  外边距合并：相邻块元素垂直外边距的合并:当上下相邻的两个块元素相遇时，如果上面的元素有下外边距margin-bottom，下面的元素有上外边距margin-top，则他们之间的垂直间距不是margin-bottom与margin-top之和，而是两者中的较大者 , 这种现象被称为相邻块元素垂直外边距的合并（也称外边距塌陷）。

 　　　　　　2、嵌套关系的块元素的外边距合并：对于两个嵌套关系的块元素，如果父元素没有上内边距及边框，则父元素的上外边距会与子元素的上外边距发生合并，合并后的外边距为两者中的较大者。

避免嵌套关系外边距合并的方法：

1. 给父元素添加边框
2. 给父元素添加内边距
3. 给父元素添加overflow属性  

2、盒子阴影 ：向div元素添加阴影

水平阴影 垂直阴影 影子模糊距离 影子的颜色

box-shadow: 60px 30px 10px #ff0000;