八月初七
浏览器排版是根据元素的特征(块和级),从上往下,从左往右排版。这就是标准文档流。
float:left/right;
效果:元素都加浮动,后面的元素会紧跟着前面的元素并排排列。
A、 只要加了float,这个元素就会脱离标准文档流。
(第一个加了float,离了标准文档流,对于浏览器来说,第二个元素就变成了标准文档流中的第一个,于是就会把他排在第一位。而第一个依然存在,所以就会叠加。)
行级加float,就会脱离标准流,块不像块,行不像行,能设置宽高,能并排排列,display就没有任何意义了。
B、浮动的元素会紧紧贴靠在一起。
C、浮动的元素会文字环绕
使元素脱离标准流的方法:
1、浮动 (float)
2、绝对定位(position:absolute;)
3、固定定位(position:fixed;《fixed 固定的》
浮动带来的坏处
给元素加了浮动,撑不起父级的高度了
清除浮动
1、给浮动的父元素添加高度
2、给父级添加overflow:hidden;
3、给浮动元素的后面添加一个空的div 添加样式为clear:both;
4、给浮动元素的父级添加一个类叫clearfix
伪类选择器
伪类选择器
只要选择器后面带:都可以说他是伪类选择器
如:
a:link{} a:hover{} a:visited{} a:active{} p:after{} p:before{}
a的四种状态:
a:link(正常的)
a:visited(访问过后的)
a:hover(鼠标悬浮)
a:active(鼠标点击的那一下)
(注:四种状态的顺序不能变)
伪元素和伪类选择器的区别
伪元素有两个冒号 如(p::after{})
伪类选择器有一个冒号 如(p:hover{})