css選取器及float(浮動)

標籤：群組   部分   規則   htm   對象   text   優先   html   ade   

--------------------------選取器( 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(浮動)