Web-9月14日随笔

—.Css层叠性质:

      1.继承性(后代或子代继承父级元素的颜色,字体·,文本)

      2.层叠性:层叠性是选择器的一种的能力

          第一种情况:没有选择任何标签或者选择器起的名字(类),走继承性(如果有多个属性继承,就近原则)。

          第二种情况:权重一样大,就近原则(后面的会把前面的覆盖掉);   谁的权重大就选谁。

  二.

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

三.

浮动:float:left/right(左浮/右浮)  【浮动后的元素脱离标准文档流】        浮动还可以造成文字环绕的效果;

clear:both(浮动所带来的危害:撑不起父级高度了,所以得用clear:both)

清除浮动的三种方法:

           1.直接给父级元素添加高度  2.给父级添加overflow-hidden(超出隐藏)  3.给浮动元素的后面添加一个空的div 添加样式为clear:both。

块级元素浮动:

   范例:  <!DOCTYPE  html>

      <html>

       <head>

       <meta charset="UFT-8">

       <title>块级元素浮动效果</title>

     【 <style>

        .one{width:200px;

            height:200px;

            float:left   }

        .two{width:300px;

            height:200px; }   (效果:第二个隐藏在了第一个后面;

原因:因为块状元素都是独占一行,给第一个添加浮动后脱离了标准流,不受控制了。而第二个属于标准流,所以把它当成了第一位)】

       </style>  

          </head>

            <body>

        <div class=“one”>(块状元素的特点:独占一行,自动换行,元素呈块状,可设宽高)

           哈哈哈哈

        </div>

        <div class=“two”>

          嘿嘿嘿嘿

        </div>

       </body>  

      </html>  

行内元素浮动:   

      <!DOCTYPE   html>

      <html>

         <head>          

        <meta charset="UFT-8">

        <title>行内元素浮动</title>

         <style>

          .one{  width:“100px”   

             height:100px;

             float:left     }

          .two   {  width:“100px”   

             height:100px;

              float:left     }【效果:给浮动后,行内元素有了宽高,能并排排列】

        </style>   

         </head>

         <body>

          【<sapn class=“one”>哈哈哈</span>

          <span class=“two”>嘿嘿嘿</span>】(行内元素特点:可以与其他元素在一行显示,不换行,不能设置宽高,根据内容的多少决定空间的大小)

         </body>

      </html>

四 : 1. visibility:hidden(隐藏)

    2. disply:none(隐藏)

  二者区别:第一个隐藏占据空间,第二个隐藏不占据空间。

posted @ 2018-10-16 11:25  前端学者  阅读(84)  评论(0编辑  收藏  举报