一, 层叠的问题
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 是对元素内部的文本集中的
来源: http://www.bubuko.com/infodetail-2770324.html