【我的總結】清除樣式(間距、浮動、定位)

清除樣式瀏覽器

 1、清除間距:*{margin:0;padding:0;}spa

1,便於設計,清除不一樣標籤的內外間距值;設計

2可使全部的瀏覽器這兩項默認值統一,有利於後期的兼容性調整。 (不一樣瀏覽器對不一樣標籤的默認margin,padding值不同)繼承

2、清除浮動文檔

浮動元素,脫離文檔流,變成內聯塊元素;不會再將父撐開;並帶來不少後期影響。(塌陷問題)it

1,浮動的元素後添加<div class=」cf」></div>  .cf: { clear:both;}io

2父級div定義 overflow:auto;class

3,用僞類給父級加類.clearfix來定義   兼容性

.clearfix{zoom:1;/*爲了兼容IE*/}方法

.clearfix:after{ content:"";//設置內容爲空

height:0;//高度爲0

      line-height:0;//行高爲0

      display:block;//將文本轉爲塊級元素

      visibility:hidden;//將元素隱藏

      clear:both//清除浮動

     }

4使用雙僞元素清除浮動

.clearfix { zoom: 1; }

.clearfix:before,.clearfix:after {

                  content: "";

                  display: block;

line-height: 0; 

                             }

            .clearfix:after{  clear: both;

}

 總結:種方法會增長許多沒必要要的標籤,

第二種方法會將超出部分隱藏在某些時候咱們想清除浮動而且保留超出部分時作不到, 第三種方法來代碼多。第四種時三的改良版,比較簡便。(加入:before以解決現代瀏覽器上邊距摺疊的問題

另:父給高或加浮動或絕對定位,也能夠解決,但不清除浮動會帶來其餘影響。

3、清除定位

Position:static;(恢復默認值)

任意 position: static; 的元素不會被特殊的定位。一個 static 元素表示它不會被「positioned」,一個 position 屬性被設置爲其餘值的元素表示它會被「positioned」

清除樣式參數  元素應用哪一個樣式,優先級來決定。

(可再取一個類名)從新定義,計算機解析從前日後,後來的數據會覆蓋前者。

應用:基本一致的樣式,CSS能夠定義一次反覆調用,個別修改時,加個類名再從新定義。

瀏覽器根據優先級來決定給元素應用哪一個樣式,而優先級僅由選擇器的匹配規則來決定。

內聯》ID選擇器》僞類=屬性選擇器=類選擇器》元素選擇器【p】》通用選擇器(*)》繼承的樣式

權重:內聯樣式1000id選擇器100class選擇器10》標籤選擇器1

優先級計算 a*100+b*10+c a,b,c分別爲#,類,標籤出現的次數)

Ul#nav li.num1 a  1*100+1*10+3=113 (出現的次數,無論怎麼組合)

 

注意事項:優先級基於類型 只能同類別比較

1、(:[] . 爲 同類)。

#nav{} ID選擇器類,[id=」nav」]{ }爲屬性選擇器

2優先級的計算不是基於十進制升位的,後面的數優先級再高也不能升到前一位。(一個# 優先級高於無限個class

通用選擇器(*),子選擇器(>),和相鄰同胞選擇器(+)並不在這個等級中,因此他們的權值爲0。不參與計算。

!Important 儘可能少用。用於特殊改變和改變行內樣式。

相關文章
相關標籤/搜索