![订阅](https://www.cnblogs.com/images/xml.gif)
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:隐藏后不占据空间