CSS知识小结2-DIV+CSS页面属性（盒子模型）

一、单行文字实现垂直居中

div{
    width:200px;
    height:40px;
    line-height:40px;
}
    

• 当盒子的高度height = 行高line-height时，文字会在盒子处于居中
• 当盒子的高度height < 行高line-height时,文字偏下
• 当盒子的高度height > 行高line-height时,文字偏上

*功能：实现文字居中，美化页面样式。

二、背景属性：图片，位置，颜色

1.背景图片：background-image:url(插入图片的相对路径)；

常用于装饰性的logo和超大背景图。

2.背景平铺：background-repeat:repeat(默认平铺)；no-repeat(不平铺)。

3.背景颜色：background-color;

 颜色在图片下层，若有背景图片，会将颜色覆盖

4.背景图片位置：background-position: left/right/center  center/top(水平靠左，垂直居中)

 background-position: center top  适用于超大背景图    

*混合定位： background-position: center  40px（前者代表水平x 轴，后者代表y轴）

5.背景图像固定（背景附着）background-attachment: scroll（滚动） |  fixed（固定）图像位置固定，不随页面滚动而滚动。

*复合写法：background: transparent url() repeat fixed top;

6.背景色半透明： background: rgba(0,0,0,0.3)  最后一个参数是alpha透明度，区间在0~1之间，半透明指盒子颜色，里面内容不受影响。

三、 CSS特性： 层叠性，继承性，优先级

1.层叠性：样式冲突时，遵循就近原则（离body结构近，即后写的），哪个样式近，就执行哪个。

2.继承性：子标签会继承副标签的某些样式，比如颜色，字体.

如图12px/1.5意味在当前元素基础上的1.5倍。

3.优先级：优先级由小到大，继承的权重最小，如果有其他选择器选择，则会被层叠。

*权重叠加：   

四、 盒子模型

0.盒子边框

   边框样式：border-style

   边框粗细：border-style (px)

   边框颜色：border-color

  *复合写法：border: 5px solid pink;顺序没有要求。

   测量盒子时不加盒子边框，边框会把盒子实际大小拉大。

   表格细线边框：border-collapse: collapse（合并）

 

1.盒子内边距：padding 

盒子内边距：padding 

 padding复合写法

 

 padding也会影响盒子的实际大小，虽说是内边距，但却放大盒子实现边距效果，所以在实际设计盒子大小时要考虑padding的值来调整 weight/height 的大小。

2.盒子外边距：margin

 3.块级盒子水平居中

 常见写法：

（1）margin-left:auto;margin-right:auto;

  (2)   margin:auto

  (3)   margin:0 auto;

*盒子里行内元素或行内块元素找父元素，在style定义：text-align:center;

4.嵌套块元素塌陷