盒子模型

盒子模型之边框

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

知识点五：内边距

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;