淺析CSS中ID和Class、Margin和Padding的區別打賞

這兩個區別都是比較容易混淆的問題,尤其是Class與ID,相信很多人并沒有仔細了解過之中區別。以下是我的一些理解:

1. ID與Class的區別

ID,通常用于定義頁面上一個僅出現一次的標記。在對頁面排版進行結構化布局時(比如說通常一個頁面都是由一個頁眉,一個報頭,一個內容區域和一個頁腳等組成),一般使用ID比較理想,因為一個ID在一個文檔中只能被使用一次。而這些元素在同一頁面中很少會出現大于一次的情況。

至于Class,是用來根據用戶定義的標準對一個或多個元素進行定義的。打個比較恰當的比方:一個Class可以定義劇本中每個人物的故事線,你可以通過CSS,Javascript等來使用這個類。因此你可以在一個頁面上使用class="lay1" ,class="lay2",class="lay3"來區分不同的故事線。還有一點非常重要的是你可以在一個文檔中使用任意次數的Class。

歸納成一句話就是:Class可以反復使用而ID在一個頁面中僅能被使用一次。有可能在很大部分瀏覽器中反復使用同一個ID不會出現問題,但在標準上這絕對是錯誤的使用,而且很可能導致某些瀏覽器的現實問題。(剛才在Dreamweaver中試了一下,確實,并沒有出錯)

在實際應用的時候,Class可能對文字的排版等比較有用,而ID則對宏觀布局和設計放置各種元素較有用。

2. Margin與Padding的區別

margin和padding用來隔開元素,margin是隔開元素與外邊,padding是隔開元素里邊。說白了,一個是內部的距離,一個是外部的距離;padding:內邊距;margin:外邊距。

兩者都是代替表格最重要的作用->分割塊的好方法,區別在于Margin是不同的Tag間互相隔離的距離而Padding是同一元素中不同內容分割使用,這在表格中最看得清楚。尤其是當對一個區域加載了背景樣式之后,Padding下的內容背景色會發生改變,而Margin則不會有所改變。

margin的取值有:margin-top, margin-right, margin-bottom, margin-left

padding的取值有:padding-top, padding-right, padding-bottom, padding-left

簡寫法(舉例):

四個邊距均為10px:

body?{margin: 10px}

頂邊距和底邊距為10px,左邊距和右邊距是父元素寬度的2%:

body?{margin: 10px 2%}

頂邊距為10px,左邊距和右邊距是父元素寬度的2%,底邊距是-10px:

body?{margin: 10px 2% -10px}

頂邊距為10px,右邊距是父元素寬度的2%,底邊距是-10px,而左邊距由瀏覽器設置:

body?{margin: 10px 2% -10px auto}

關于margin和padding的具體使用,在下次文章中詳細闡述。

淺析CSS中ID和Class、Margin和Padding的區別
文章《淺析CSS中ID和Class、Margin和Padding的區別》二維碼
  • 微信打賞
  • 支付寶打賞

已有2條評論

  1. 燕郊

    我前一段時間才搞懂這幾個

    2011-06-15 13:21 回復
    • 窮小子

      呵呵,弄懂才能去更好的利用

      2011-06-15 13:35 回復

(必填)

(必填)

(可選)

黑龙江22选5开奖