标准文档流 伪类选择器

Posted liancai001

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了标准文档流 伪类选择器相关的知识,希望对你有一定的参考价值。

                                                 标准文档流

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

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

 

以上是关于标准文档流 伪类选择器的主要内容,如果未能解决你的问题,请参考以下文章

Css3之高级-1 Css复杂选择器(兄弟选择器 属性选择器伪类选择器伪元素选择器)

CSS常用选择器伪元素选择器伪类选择器大全——响应式Web系列学习笔记

CSS常用选择器伪元素选择器伪类选择器大全——响应式Web系列学习笔记

伪类选择器

python 之 前端开发(基本选择器组合选择器 交集与并集选择器序列选择器属性选择器伪类选择器伪元素选择器)

CSS3中的选择器