CSS實現樣式佈局

使用CSS建站時，您確定遇到過形形色色的佈局問題，最後可能被搞得焦頭爛額。本文的目的是讓您的設計過程更爲容易，當您遇到困難時爲您提供快速參考。

　　一、有疑問，先驗證

　　在調試時，先對您的代碼進行驗證每每能省去很多麻煩事。格式不正確的XHTML/CSS 會致使許多佈局上的錯誤。在其餘瀏覽器中進行測試以前，請先在最早進的瀏覽器中撰寫和測試CSS代碼，而不是相反。

　　若是您在破舊的瀏覽器中編寫和測試，你的代碼就不得不依賴那個破舊瀏覽器的糟糕的顯示，而後在符合標準的瀏覽器中進行測試，看到顯示結果「不正常」 時，你會很沮喪的。相反，您應該先將您的代碼完善，而後再設法爲較低級的瀏覽器打算。這樣從一開始您的代碼就是符合標準的，你沒必要再爲支持其餘瀏覽器而勞 心費神。固然了，目前聽從標準的瀏覽器無疑就是 Mozilla, Safari 或 Opera。

　　二、確保您想要的效果然的存在

　　許多特定的瀏覽器專有的CSS擴展在正式標準中並不存在。 若是您對 filter(濾鏡) 或滾動條指定樣式，您用的就是私有代碼，除了IE以外，在別的瀏覽器中毫無做用。若是驗證器告訴您代碼沒有定義，極有可能您用了私有樣式，別期望在不一樣的瀏覽器中獲得一致的效果。

　　三、若是佈局中必定要用浮動對象，別忘了適時使用清除(clear)屬性

　　浮動元素似易實難，並且難以駕馭。若是您發現浮動對象伸出了容器的邊界，或者不像您所指望的那樣顯示，請檢查您的指望是否正確。關於這個問題請看Eric Meyer 的教程

　　四、邊距的合併:可用padding 或 border 來避免

　　您可能被多餘的(或者想要卻不出現的)空白搞得焦頭爛額。若是您用了 margins，邊距的合併可能就是問題的根源。 Andy Budd 對此的解釋也許能爲你解惑。

　　五、避免將 padding/border 和固定寬度同時應用到同一元素

　　IE5 錯誤的區塊模型是罪魁禍首，是它把事情弄得亂七八糟。雖然有補救方案，不過最好是繞過這個問題，當子元素的寬度固定時，爲其父元素指定padding。

　　六、避免IE下未指定樣式內容的閃爍

　　若是您用 @import 來輸入外部樣式表，遲早會發現IE有「閃爍」的毛病。在應用CSS樣式以前，未格式化的HTML文本會短暫地出現。這是能夠避免的.

　　七、別期望 min-width 在IE中有用

　　IE不支持它，可是它將 width 看成 min-width，因此經過一些 IE 的過濾技巧(filtering)，能夠實現一樣的最終效果。

　　八、走投無路時，試一試減小寬度

　　因爲舍入偏差，有時 50% 加上 50% 等於 100.1%，破壞某些瀏覽器中的佈局。不妨試試將 50% 減到 49%，甚至 49.9%。

　　九、IE 中顯示不正常

　　多是 Peekaboo 臭蟲在做怪，尤爲是當鼠標通過超連接時能顯示正常。修補方法見Position is Everything。

　　十、若是使用了錨點，在應用超連接樣式時要特別當心

　　若是您在代碼中使用了傳統的錨點()，您會注意到 :hover 和 :active僞類也會做用於它。要避免這種情形，你可使用 id，或者使用不爲人知的語法: :link:hover, :link:active

　　十一、記住「LoVe/HAte」(愛/恨)連接規則

　　要如下面的順序指定超連接僞類:Link, Visited, Hover, Acitve。任何其餘順序都不穩當。假如用了 :focus，次序應爲 LVHFA(「Lord Vader's Handle Formerly Anakin」，Matt Haughey這樣建議)。

　　十二、請記住「TRouBLED」(麻煩的)邊框

　　邊框(border)、邊距(margin)和補白(padding)的簡寫次序爲:順時針方向從上開始，即 Top, Right, Bottom, Left。好比 margin: 0 1px 3px 5px;表示上邊距爲零，右邊距爲1px，依此類推。

　　1三、非零值要指明單位

　　在用CSS指定字體、邊距或大小時，必須指明所用的單位(惟一的例外是 line-height，很奇怪，它不須要單位)。某些瀏覽器對未指明單位的處理方法不足爲據。零就是零，無論是 px 仍是 em。其餘的非零值都要明確指定單位。例如: padding: 0 2px 0 1em;

　　1四、測試不一樣的字體大小

　　像 Mozilla 和 Opera 這樣的高級瀏覽器都容許你改變字體大小，無論你用什麼字體單位。某些用戶的默認字體大小確定和你的不一樣，盡最大努力去知足他們。

　　1五、測試時用嵌入式樣式，發佈時再改成外部輸入

　　將樣式表嵌入在你的 HTML 源代碼中，在測試時能夠消除許多緩存引發的錯誤，尤爲是某些 Mac 下的瀏覽器。但在發佈前，必定要記住將樣式表移到外部文件，用 @import 或 引入。

　　1六、加上明顯的邊框有助於佈局調試

　　像 div {border: solid 1px #f00;} 之類的全局規則能夠暫時爲你查出佈局問題。爲特定的元素加上邊框可幫您找到難以發覺的重疊或空白問題。

　　1七、圖片路徑不要用單引號

　　當設置背景圖片時，要堅持用雙引號。儘管看起來好像畫蛇添足，可是若是不這麼作，IE5/Mac 會噎住。

　　1八、不要爲未來的樣式表(好比手持式設備或打印用樣式表)「佔位子」

　　Mac IE5 對空的樣式表比較感冒，會增長頁面的裝入時間。建議樣式表中至少應該有一條規則(哪怕是註釋也好)，省得 MacIE噎住。

　　還有一些建議雖然不針對某些功能，可是在開發過程當中值得注意：

　　1九、好好組織您的CSS文件

　　恰當地成塊註釋CSS，將類似的CSS選擇符編爲一組，養成一致的命名習慣和空白格式(爲跨平臺考慮，建議用空白字符而不是tab。)以及適當的次序。

　　20、以功能(而不是外觀)爲類和ID命名

　　假如您建立了一個 .smallblue 類，後來打算將文字改大，顏色變爲紅色，這個類名就再也不有任何意義了。相反，您能夠用更有描述性的名字如 .copyright 和 .pullquote。

　　2一、組合選擇符

　　保持CSS短小對減小下載時間很是重要。請儘可能爲選擇符分組、利用繼承(inheritance)以及使用簡寫(shorthand)來減小冗餘。

　　2二、使用圖片替換技術時要考慮親和力

　　已經發現傳統的FIR在屏幕閱讀器，以及關閉圖片顯示[的瀏覽器]中會出問題。對此有其餘解決辦法，要根據具體狀況，慎重使用。