CSS层叠的问题、标准文档流、伪类选择器

一、层叠的问题

　CSS有两个性质：

　　1、继承性

　　2、层叠性：选择器的一种选择能力，谁的权重大就选谁

　　　层叠性又分为：

　　　　1)、选不中：走继承性 　　　　（font、color、text、）　　　　　继承性的权重是0

　　　　　　若有多个父级都设置了样式，走就近原则

　　　　2)、选中了

　　　　　　a、权重的问题，权重大，就选谁的样式

　　　　　　b、权重相同，谁在后，选择谁

　　　　　　*纯标签和类没有可比性，纯类和ID也没有可比性

二、标准文档流

　　1、含义：浏览器的排版是根据元素的特征（快和行级），从上往下，从左到右排版，这就是标准文档流

　　2、浮动　　float：left/right

　　　  效果：

　　　　　　1)、块级加float

　　　　　　　　a：两个元素都加浮动，后面的元素会紧跟前面的元素并排排列，只要加了float，这个元素就会脱离标准文档流

　　　　　　　　b：第一个加了float，脱离了标准文档流，对于浏览器来说，第二个元素就变成了标准文档流中的第一个，于是就会把他排在第一位，而第一个依然存在，所以就会叠加

　　　　　　2)、行级加float

　　　　　　　　行级元素加float，脱离标准流，块不像块，行不像行，但能设置宽高，能并排排列，但Display就没有意义了

　　　　拓展：

　　　　　使用元素标准流的方法：

　　　　　　a、浮动：float

　　　　　　b、绝对定位：position：adsolute；

　　　　　　c、固定定位：position：fixed；      （fixed 固定的）

　　2、浮动带来的好处

　　　　给元素加了浮动，撑不起父级的高度了

　　3、清除浮动

　　　　a、给浮动的父级添加高度

　　　　b、给父级添加overflow：hidden；

　　　　c、给浮动元素的后面添加一个空的div，添加样式为clear：both；

　　　　　　<ul>

　　　　　　　<li>首页</li>

　　　　　　　<li>新闻</li>

　　　　　　　<div  style-clear:"both;"></div>

　　　　　　</ul>

　　　　d、给浮动元素的父级添加一个类叫clearfix                 （clearfix 清除格式）

　　　　　　这个类的写的样式属性有：

　　　　　　　　.clearfix：after{

　　　　　　　　　　　　content:"";

　　　　　　　　　　　　display:"block";

　　　　　　　　　　　　clear:"none";

　　　　　　　　　　　　height:0;

　　　　　　　　　　　　visibility:"hidden";　　　　　　　　　　visibility    可见的

　　　　　　　　　　　　}

　　*注：伪类选择器

　　　　只要选择后面带；都可以说他是伪类选择器

　　　　     a：hover{}　　a：visited{}　　a：active{}　　p：after{}　　p：before；

　　　　      超链接的四种状态：

　　　　　　　a：link{

　　　　　　　　　　color：blue；

　　　　　　　　　　}

　　　　　　　a:visited{

　　　　　　　　　　　color：red；

　　　　　　　　　　　}

　　　　　　　a：hover{

　　　　　　　　　　　color：green；

　　　　　　　　　　　}　　

　　　　　　　a：active{

　　　　　　　　　　　  color：yellow；

　　　　　　　　　　　 }

　　　　*这四种超链接的状态的顺序不能改变

　　    伪元素和伪类选择器的区别：

　　　     伪元素有两个冒号，如 P：after{}               伪类选择器有一个冒号，P：hover{}

　　注：

　　　1、margin：0 auto；和text-align：center；

　　　  　margin的居中是对自身；      text-align是对元素内部的文本集中的

　　　2、visibility：hidden；和display：none；

　　　　  visibility：隐藏之后还占据空间

　　　　 display：隐藏后不占据空间