很久沒寫過 BLOG 了，就再來一篇技術短文吧。

從前網頁的版面配置是用表格來實現的，缺點是內容與版面配置混在一起，程式碼看起來非常混亂，撰寫時更是如此。圖片被切割得支離破碎，完全為了版面配置而失去了原有的結構。好處是對窄頻網絡而言，同時讀取許多小圖片相當於多執行緒處理，速度比讀取一張大圖片要快一些，當然現在我們已完全不用考慮這個問題了。如今大部分網頁都使用 CSS 進行版面配置，好處很多，內容與版面配置完全分離，只需修改 CSS 就能讓網站煥然一新。有一本書叫《CSS Zen Garden》（CSS 禪意花園），整本書講解同一個 HTML 頁面，透過上百個不同的 CSS 實現完全不同的版面配置與效果，展示了 CSS 的強大功能。

一些 CSS 初學者對許多重要的 CSS 概念尚未釐清，導致在編寫或修改 CSS 程式碼時總是達不到預期效果。我就先選四個方面來講解一下吧~~~~~~

1. 不同瀏覽器對 CSS 的支援

這個問題很複雜，但其實主要是屬性是否受支援以及瀏覽器預設設定的問題。

應盡量避免使用主流瀏覽器不支援的屬性，畢竟不能不顧及大部分使用者……目前主流的瀏覽器有 IE、Chrome、Safari、Firefox、Opera，其中最令人頭痛的就是 IE，尤其是 IE6 和 IE7，存在各種奇怪的 bug，只能在遇到時再具體分析解決。建議在編寫 HTML 和 CSS 時盡量符合標準，並在發佈前於各種瀏覽器上進行測試。

為什麼不同瀏覽器看到的效果會不同？
這很可能是因為不同瀏覽器對於某些屬性擁有不同的預設值。例如對於 body，它在大部分瀏覽器中有 padding: 3px 的預設屬性，而在 Opera 中卻是 margin: 3px 的預設屬性。所以如果你只設定了 body { padding: 0; }，則在 Opera 中不會有任何效果。解決辦法是在編寫自己的 CSS 之前，先使用一段程式碼將預設值統一：

/* Reset default browser CSS.
Based on work by Eric Meyer:
http://meyerweb.com/eric/tools/css/reset/index.html
-------------------------------------------------------------- */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
    background: transparent;
    border: 0;
    margin: 0;
    padding: 0;
    vertical-align: baseline;
}
body {
    line-height: 1;
}
h1, h2, h3, h4, h5, h6 {
    clear: both;
    font-weight: normal;
}
ol, ul {
    list-style: none;
}
blockquote {
    quotes: none;
}
blockquote:before, blockquote:after {
    content: '';
    content: none;
}
del {
    text-decoration: line-through;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
    border-collapse: collapse;
    border-spacing: 0;
}
a img {
    border: none;
}

2. CSS 的優先順序

請看以下例子：

<div id="aaa">
    <h1>LINE1</h1>
    <div class="bbb">
        <h1>LINE2</h1>
    </div>
</div>

CSS 定義如下：

#aaa h1 {
     color: red;
}
.bbb h1 {
    color: green;
}
h1 {
    color: blue;
}

輸出的 LINE1 和 LINE2 分別是什麼顏色呢？

CSS 優先順序的具體算法如下，以下四種選擇器對應的權重分別是：

• 行內選擇器（即直接在網頁中使用 style 屬性指定的）：1,0,0,0
• ID 選擇器：0,1,0,0
• Class 選擇器：0,0,1,0
• 元素選擇器：0,0,0,1

每出現一個就累加一次，最後得出其優先順序。

• !important 宣告的樣式優先順序最高，若有衝突才再進行計算。
• 如果優先順序相同，則採用最後出現的樣式。
• 繼承得到的樣式優先順序最低。

雖然很少會遇到 10 個同類型選擇器的情況，但如果真的遇到了……它也是不會進位的……
所以簡單來說，基本上就是：
行內選擇器 > ID 選擇器 > Class 選擇器 > 元素選擇器

應用到例子中就是：

#aaa h1  /* 一个ID选择器，一个元素选择器，优先级是0,1,0,1 */
.bbb h1  /* 一个Class选择器，一个元素选择器，优先级是0,0,1,1 */
h1  /* 一个元素选择器，优先级是0,0,0,1 */

因此，LINE1 是紅色的，LINE2 也是紅色的。
所以如果想讓 LINE2 變成綠色，則需要改為：

#aaa .bbb h1 {  /* 优先级是0,1,1,1，最高 */
    color: green;
}

3. CSS 定位問題

position 屬性值的含義：

• static：預設值，元素在文件流中按照 HTML 中的順序依次排列。
• relative：相對定位，相對於元素本身的位置，使用 top、left、right、bottom 指定位置，此時元素所佔的空間會被保留。
• absolute：絕對定位，位置相對於元素的祖先元素中最近一個已設定相對定位的元素，此時元素本身不佔空間。
• fixed：固定定位，相對於瀏覽器視窗，此時元素本身不佔空間。

我們只需討論相對定位和絕對定位即可：

相對定位：我們可以看到，由於元素所佔的空間被保留，因此會出現一塊無法利用的空白區域，而且因為它發生了偏移，很容易遮擋其他元素。因此在實際使用相對定位時，幾乎不再對其進行偏移，主要用途是為其絕對定位的子元素提供位置參考。

絕對定位：

我們可以看到，設定絕對定位後，元素本身就不再佔用任何空間。如果未指定位置，它會留在原來的位置，但會遮擋因它不佔空間而從下方移上來的元素。如果指定了位置，則相對於最近一個已設定相對定位的祖先元素來定位；若沒有這樣的祖先元素，則相對於頁面元素。因此，絕對定位成為了在大型元素內定位小型元素的首選方法：

4. 浮動

浮動其實還挺簡單的，以下兩點需要注意：

元素設定了浮動以後，就不會再佔用空間。因此，如果只對一個元素設定浮動，下方的元素會上移並被該浮動元素遮擋。所以需要對所有並列的元素都設定浮動。

另外，如果一個元素中的所有子元素都設定了浮動，則該元素內部就會變空，無法被子元素撐開而被父元素包圍，因此需要在最後增加一個清除浮動的元素。

.clear {
    clear: both;
}

• 上一篇：Dropbox 免費升級至 20G
• 下一篇：生日@美蘭湖

css, html, web