标准文档流伪类选择器

it2022-05-07  0

                                                 标准文档流

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

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

 

转载于:https://www.cnblogs.com/liancai001/p/9651856.html


最新回复(0)