关于css的一些知识点整理

一、标签的类型：  

行内：span、a、b、i、strong、em、   1.共处一行   2.不支持设置宽高

display:block; 转换成块

块：h1-h6 p div  ul ol 1.独占一行   2.支持设置宽高

display:inline; 转换为行内

行内块：img   1.共处一行   2.支持设置宽高

display:inline-block; 转换为行内块

二、定位

relative  相对定位，对象不可层叠

1、针对自己定位

2、不脱离文档流

*将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流

absolute  绝对定位。将对象从文档流中拖出，使用left，right，top，bottom等属性相对于其最接近的一个具有定位设置的父对象进行绝对定位。如果不存在这样的父对象，则依据body对象。

1、找具有定位的父级，找不到找body对象

2、脱离文档流

　　3、元素变块

　   4、宽度默认变小，小到内容的宽度

fixed  固定定位

　　1、针对可视区定位

　　2、脱离文档流

　　3、可以把元素变成块

　　4、宽度默认变小，小到内容的宽度

三、margin

margin的bug

1.margin塌陷（只对上下而言）               上下之间的margin - 重叠               不会相加

解决办法：          1.单方向定义          2.用padding（有条件）

2.margin  拖拽父级

　　  解决办法：           1.给父级加border           2.给父级加overflow-hidden （加堵墙）           3.用padding(推荐) 能用padding就用padding！！！

margin 是有好处的：

margin可以写负值；  Padding不可以；

　　1.在没有定义宽高的块内 写Margin可以改变块的大小

　　2.在定义宽高的块内  写Margin可以改变块的位置

四、浮动

1、浮动的特点：

（1）.脱离文档流          （2）.可以把元素变成块                   （3）.顶对齐          （4）.它会跟着最高的后面

2、浮动的三要素：

　　（1）加了浮动就得清浮动！

　　（2）尽量设置宽度

　　（3）同级元素浮动，同级所有元素都必须加浮动

3、清除浮动

　　 （1）给浮动元素的父级加  overflow：hidden；

　　 （2）给浮动元素最下边加  clear：both；

　　 （3）给浮动元素父级加 .clearfix:after{display:block; content:''; clear:both;}

　　　　　　　　　　　　　.clearfix{zoom:1;}

五、元素变成块：
   diplay:block;
   float:left/right;
   position:absolute/fixed;

六、透明度设置

　　filter:alpha(opacity:30);

　　opacity:0.3;

 七、一个div层垂直水平居中的代码

　　position：absolute; top:50%; left:50%; margin-top:-height/2; margin-left:-width/2;