zoukankan      html  css  js  c++  java
  • 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{  “100px”   

                 height:100px;

                 float:left     }

              .two   {  “100px”   

                 height:100px;

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

            </style>   

             </head>

             <body>

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

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

             </body>

          </html>

    四 : 1. visibility:hidden(隐藏)

        2. disply:none(隐藏)

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

  • 相关阅读:
    关于yyyy-MM-dd格式日期字符串,解析成LocalDateTime遇到的问题
    idea设置代码提示不区分大小写
    不错的Django技术网址
    Django-Rest-Framework 教程: 快速入门
    Djanto static静态文件配置
    Html5 touch event
    Zepto.js touch模块深入分析
    Python单元测试框架之pytest -- fixtures
    Python:高级主题之(属性取值和赋值过程、属性描述符、装饰器)
    Nginx基本配置、性能优化指南
  • 原文地址:https://www.cnblogs.com/lovels/p/9647902.html
Copyright © 2011-2022 走看看