使用css建站時，您肯定遇到過形形色色的布局問題，最後可能被搞得焦頭爛額。本文的目的是讓您的設計過程更為容易，當您遇到困難時為您提供快速參考。
1、有疑問，先驗證
在除錯時，先對您的**進行驗證往往能省去不少麻煩事。格式不正確的xhtml/css 會導致許多布局上的錯誤。在其他瀏覽器中進行測試之前，請先在最先進的瀏覽器中撰寫和測試css**，而不是相反。
如果您在破舊的瀏覽器中編寫和測試，你的**就不得不依賴那個破舊瀏覽器的糟糕的顯示，然後在符合標準的瀏覽器中進行測試，看到顯示結果「不正常」時，你會很沮喪的。相反，您應該先將您的**完善，然後再設法為較低階的瀏覽器打算。這樣從一開始您的**就是符合標準的，你不必再為支援其他瀏覽器而勞心費神。當然了，目前遵從標準的瀏覽器無疑就是 mozilla, safari 或 opera。
2、確保您想要的效果真的存在
許多特定的瀏覽器專有的css擴充套件在正式標準中並不存在。 如果您對 filter(濾鏡) 或滾動條指定樣式，您用的就是私有**，除了ie之外，在別的瀏覽器中毫無作用。如果驗證器告訴您**沒有定義，極有可能您用了私有樣式，別指望在不同的瀏覽器中得到一致的效果。
3、如果布局中一定要用浮動物件，別忘了適時使用清除(clear)屬性
浮動元素似易實難，而且難以駕馭。如果您發現浮動物件伸出了容器的邊界，或者不像您所期望的那樣顯示，請檢查您的期望是否正確。關於這個問題請看eric meyer 的教程
4、邊距的合併:可用padding 或 border 來避免
您可能被多餘的(或者想要卻不出現的)空白搞得焦頭爛額。如果您用了 margins，邊距的合併可能就是問題的根源。 andy budd 對此的解釋也許能為你解惑。
5、避免將 padding/border 和固定寬度同時應用到同一元素
ie5 錯誤的區塊模型是罪魁禍首，是它把事情弄得亂七八糟。雖然有補救方案，不過最好是繞過這個問題，當子元素的寬度固定時，為其父元素指定padding。
6、避免ie下未指定樣式內容的閃爍
如果您用 @import 來輸入外部樣式表，早晚會發現ie有「閃爍」的毛病。在應用css樣式之前，未格式化的html文字會短暫地出現。這是可以避免的.
7、別指望 min-width 在ie中有用
ie不支援它，但是它將 width 當作 min-width，所以通過一些 ie 的過濾技巧(filtering)，可以實現同樣的最終效果。
8、走投無路時，試一試減少寬度
由於捨入誤差，有時 50% 加上 50% 等於 100.1%，破壞某些瀏覽器中的布局。不妨試試將 50% 減到 49%，甚至 49.9%。
9、ie 中顯示不正常
可能是 peekaboo 臭蟲在作怪，尤其是當滑鼠經過超連結時能顯示正常。修補方法見position is everything。
10、如果使用了錨點，在應用超連結樣式時要特別小心
如果您在**中使用了傳統的錨點()，您會注意到 :hover 和 :active偽類也會作用於它。要避免這種情形，你可以使用 id，或者使用鮮為人知的語法: :link:hover, :link:active
11、記住「love/hate」(愛/恨)鏈結規則
要以下面的順序指定超連結偽類:link, visited, hover, acitve。任何其他順序都不妥當。假如用了 :focus，次序應為 lvhfa(「lord vader's handle formerly anakin」，matt haughey這樣建議)。
12、請記住「troubled」(麻煩的)邊框
邊框(border)、邊距(margin)和補白(padding)的簡寫次序為:順時針方向從上開始，即 top, right, bottom, left。比如 margin: 0 1px 3px 5px;表示上邊距為零，右邊距為1px，依此類推。
13、非零值要指明單位
在用css指定字型、邊距或大小時，必須指明所用的單位(唯一的例外是 line-height，很奇怪，它不需要單位)。某些瀏覽器對未指明單位的處理方法不足為憑。零就是零，不管是 px 還是 em。其他的非零值都要明確指定單位。例如: padding: 0 2px 0 1em;
14、測試不同的字型大小
像 mozilla 和 opera 這樣的高階瀏覽器都允許你改變字型大小，不管你用什麼字型單位。某些使用者的預設字型大小肯定和你的不同，盡最大努力去滿足他們。
15、測試時用嵌入式樣式，發布時再改為外部輸入
將樣式表嵌入在你的 html 源**中，在測試時可以消除許多快取引起的錯誤，尤其是某些 mac 下的瀏覽器。但在發布前，一定要記住將樣式表移到外部檔案，用 @import 或 引入。
16、加上明顯的邊框有助於布局除錯
像 div 之類的全域性規則可以暫時為你查出布局問題。為特定的元素加上邊框可幫您找到難以發覺的重疊或空白問題。
17、路徑不要用單引號
當設定背景時，要堅持用雙引號。儘管看起來好像多此一舉，但是如果不這麼做，ie5/mac 會噎住。
18、不要為將來的樣式表(比如手持式裝置或列印用樣式表)「佔位子」
mac ie5 對空的樣式表比較感冒，會增加頁面的裝入時間。建議樣式表中至少應該有一條規則(哪怕是注釋也好)，免得 macie噎住。
還有一些建議雖然不針對某些功能，但是在開發過程中值得注意：
19、好好組織您的css檔案
恰當地成塊注釋css，將相似的css選擇符編為一組，養成一致的命名習慣和空白格式(為跨平台考慮，建議用空白字元而不是tab。)以及適當的次序。
20、以功能(而不是外觀)為類和id命名
21、組合選擇符
22、使用替換技術時要考慮親和力
CSS樣式 布局篇
1.css基本樣式 背景語法 background background color background image background repeat background attachment background position background 000 url 位址 no repea...
css盒子 布局樣式
恢復內容開始 1.盒子 邊框border top width 10px 寬度 border top style solid dashed dotted 實線 虛線 點線 border top color red 顏色 border top 10px solid red 寬 線 色 上邊框 borde...
Css高階練習 實現抽屜網樣式布局
全部42區 段子挨踢1024 你問我答 註冊登入 最熱最新 人類發布 即時排序 24小時 3天 發布 大臉撐在小胸 剛在以色列大使館經歷史上最嚴的安檢。過完常規掃瞄還有二 次安檢，包裡所有東西都掏出來，唇膏擰開，粉盒開啟，潤喉糖開啟，錢包裡所有卡和錢摸 一遍，紙巾摸一遍，包包鍊子每乙個扣都仔細摸過。...