标准文档流 伪类选择器

Posted 2021-01-06 liancai001

                                                 标准文档流

　　　　浏览器排版是根据元素的特征（块和级),从上往下，从左往右排版。这就是标准文档流。

　　　　　　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

　　　　　　　　如：body里面

                                                    <ul class="clearfix">

　　　　　　　　　　　　　　　　　　<li></li>

　　　　　　　　　　　　　　　　　　<li></li>

　　　　　　　　　　　　　　　</ul>

　　　　　　　　　　　style里面是

　　　　　　　　　　　　　　　.clearfix:after{    content:"0";

　　　　　　　　　　　　　　　　　　　　　　display:block;

　　　　　　　　　　　　　　　　　　　　　　clear:both;

　　　　　　　　　　　　　　　　　　　　　　height:0；

　　　　　　　　　　　　　　　　　　　　　　visibility：hidden；}

                                         伪类选择器

伪类选择器

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

　　如：

　　　　　　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{}）