一、层叠的问题

 CSS有两个性质:

  1、继承性

  2、层叠性:选择器的一种选择能力,谁的权重大就选谁

   层叠性又分为:

    1)、选不中:走继承性     (font、color、text、)     继承性的权重是0

      若有多个父级都设置了样式,走就近原则

    2)、选中了

      a、权重的问题,权重大,就选谁的样式

      b、权重相同,谁在后,选择谁

      *纯标签和类没有可比性,纯类和ID也没有可比性

二、标准文档流

  1、含义:浏览器的排版是根据元素的特征(快和行级),从上往下,从左到右排版,这就是标准文档流

  2、浮动  float:left/right

     效果:

      1)、块级加float

        a:两个元素都加浮动,后面的元素会紧跟前面的元素并排排列,只要加了float,这个元素就会脱离标准文档流

        b:第一个加了float,脱离了标准文档流,对于浏览器来说,第二个元素就变成了标准文档流中的第一个,于是就会把他排在第一位,而第一个依然存在,所以就会叠加

      2)、行级加float

        行级元素加float,脱离标准流,块不像块,行不像行,但能设置宽高,能并排排列,但Display就没有意义了

    拓展:

     使用元素标准流的方法:

      a、浮动:float

      b、绝对定位:position:adsolute;

      c、固定定位:position:fixed;      (fixed 固定的)

  2、浮动带来的好处

    给元素加了浮动,撑不起父级的高度了

  3、清除浮动

    a、给浮动的父级添加高度

    b、给父级添加overflow:hidden;

    c、给浮动元素的后面添加一个空的div,添加样式为clear:both;

      <ul>

       <li>首页</li>

       <li>新闻</li>

       <div  style-clear:"both;"></div>

      </ul>

    d、给浮动元素的父级添加一个类叫clearfix                 (clearfix 清除格式)

      这个类的写的样式属性有:

        .clearfix:after{

            content:"";

            display:"block";

            clear:"none";

            height:0;

            visibility:"hidden";          visibility    可见的

            }

  *注:伪类选择器

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

         a:hover{}  a:visited{}  a:active{}  p:after{}  p:before;

          超链接的四种状态:

       a:link{

          color:blue;

          }

       a:visited{

           color:red;

           }

       a:hover{

           color:green;

           }  

       a:active{

             color:yellow;

            }

    *这四种超链接的状态的顺序不能改变

      伪元素和伪类选择器的区别:

        伪元素有两个冒号,如 P:after{}               伪类选择器有一个冒号,P:hover{}

 

  注:

   1、margin:0 auto;和text-align:center;

      margin的居中是对自身;      text-align是对元素内部的文本集中的

   2、visibility:hidden;和display:none;

      visibility:隐藏之后还占据空间

     display:隐藏后不占据空间