css 盒子模型

盒子模型（内容、边框、外边距、内边距）网页布局的本质就是拼接盒子的过程 div+css

边框  border

1.   边框属性：边框厚度、边框颜色、边框的线条样式       
2.   边框厚度 ：border-top-width(上边框厚度)
3.   边框颜色  ：border-top-color(上边框颜色) 
4.   边框线条样式： boder -top-style(上边框线条样式)
1. solid  实线
2. dashed  虚线
3. dotted  点线
4. double  双实线
5. 综合设置： border:  1px  solid  red ;
6. 边框会影响盒子的尺寸

 

 内边距   padding

1. 定义： 盒子内容与边框之间的距离
2. 用法：
1. 上内边距  padding-top:  20px ;
2. 左内边距  padding-left:  15px ;
3. 下内边距  padding-bottom:  25px ;
4. 右内边距  padding-right:  10px ;   
5. 综合设置：
1. 上、下、左、右 ： padding:  50px  40px  30px  20px ;
2. 上、左右、下：  padding:  50px  40px  30px ;
3. 上下、左右： padding: 50px  30px ;
4. 上下左右： padding:  50px ; 

外边距

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

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

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

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

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

 外边距合并：

• 相邻块元素垂直外边距的合并:

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

• 嵌套关系的块元素的外边距合并：

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

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

• • 　　给父元素添加边框
  • 　　给父元素添加内边距
  • 　　给父元素添加overflow属性