• css选择器及float(浮动)


    --------------------------选择器( css有就近原则)-------------------------------

      选择器名称                 在css表的形态                在html中的调用

    •html标记符选择器:        p,a,img,div,span....          不用另外加任何东西

    •具有上下关系的选择器:     div span a (中间是空格)       不用另外加任何东西

    •类(class)选择器:         .    ( 比如:   .header)     <div class="header "></div>

    •id选择器  (一般不用id,留给js来操作)                 #     ( 比如:    #text  )    <div id="text "></div>

    •群组选择器 (优化代码)              .left , .right , p , ul , li •伪类选择器 (选择器上加上:hover)       a:hover{color:#ccc}

    选择器的优先级: 行间  >  id选择器  >  class选择器  >  标记符选择器

    2.浮动(float)

      功能:用于在普通元素流布置规则以外放上元素。  

     数值: none -无改动。      

                   left -将其它元素内容放到浮动元素右边。    

                right -将其它元素内容放到浮动元素左边

    ---------------------float(浮动)-------------------------

    为什么要 清除浮动????

      浮动带来的负面影响:

      会使父级对象的高度消失,

      导致背景图片,

      边框不能正常显示,

      margin,padding设置值不能正确显示(特别是上下边的padding和margin不能正确显示);

    清除浮动的三种方式:( 1 ):直接给父级确定的高度; (项目中的扩展,不现实 )

                ( 2 ):在父级的css里直接加上 overflow:hidden;  但是不能和height同时出现;  overflow:hidden;和height同时出现(功能:超出部分被隐藏; )

                ( 3 ):a:在css里面 .***{ clear:both;}  b:在父级结束之前新添 <div class="***"></div>

                <div>

                  <div class="***"></div>

                </div>

  • 相关阅读:
    C#进阶-Linq-join
    C#进阶-Linq
    C#-string-stringBuilder
    C#-继承-多态
    Spring基础
    JQuery基本操作
    Oracle数据库基础操作
    AJAX前端后端
    AJAX异步提交(前端)
    js基本操作
  • 原文地址:https://www.cnblogs.com/fxty/p/7044847.html
Copyright © 2020-2023  润新知