9.14
❤知识补充
margin的问题:margin:0 auto;可以解决元素在网页的居中问题(记得设置宽度)
1、css层叠样式表的问题
CSS的两个性质
(1)继承性
(2)层叠性
a:选不中,走继承性(font系列 color text)继承性的权重为0
❤如果这个元素有多个父级元素设置了这样的属性,走就近原则
b:选中了
❤权重的问题,谁的权重大,就选谁的样式
❤权重相同,谁在后选谁,因为覆盖了
❤纯标签和类没有可比性,纯类和ID也没有可比性
2、标准文档流
浏览器的排版是根据元素的特征(块和行级),从上往下,从左到右排版,这就是标准文档流。
❤浮动 float:left/right;
效果:元素都加浮动,后面的元素会跟前面的元素并排排列
A:只要加了float,这个元素就会脱离标准文档流
行级元素加了float,脱离了标准文档流,块不像块,行不像行,能设置宽高,能并排排列,则也不用再给行级标签加display了,没有意义了
B:浮动的元素会贴靠在一起
C:浮动的元素会文字环绕
❤拓展知识点 使元素脱离标准流的方法
1、浮动 float
2、绝对定位 position=absolute;
3、固定定位 position=fixed;(fixed:固定的)
❤浮动带来的坏处:撑不起父级元素的高度
❤清除浮动(的坏处):
(1)给浮动的父级元素添加高度
(2)给父级元素添加overflow:hidden;
(3)给浮动元素的后面添加一个空的div标签 添加样式为 clear:both;
(4)给浮动元素的父级添加一个类,叫做“clearfix”
这个类写的样式属性有
.clear:after{
content:"";
display:block;
clear:both;
height:0;
visibility:hidden;
}
❤伪类选择器:只要后面带冒号:都可以说是伪类选择器
❤伪元素和伪类选择器的区别
伪元素有两个冒号,如p::after{}
伪类选择器有一个冒号,如p:hover{}
❤超链接a的伪类选择器
a:link 正常的颜色
a:visited 访问过后的颜色
a:hover 鼠标悬浮
a:active 激活 鼠标点击的那一刻
a的四种状态的顺序不能变