首页 > 代码库 > css选择器及float(浮动)

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>

css选择器及float(浮动)