錦囊妙計 CSS實現樣式布局22招

2021-04-28 09:04:27 字數 2876 閱讀 3103

在使用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」(愛/恨)鏈結規則要以下面的順序指定超連結偽類ink, 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。)以及適當的次序。

22、使用替換技術時要考慮親和力已經發現傳統的fir在螢幕閱讀器,以及關閉顯示[的瀏覽器]中會出問題。 對此有其他解決辦法,要根據具體情況,慎重使用。

錦囊妙計CSS實現樣式布局22招

在使用 css建站時,您肯定遇到過形形色色的布局問題,最後可能被搞得焦頭爛額。本文的目的是讓您的設計過程更為容易,當您遇到困難時為您提供快速參考。1 有疑問,先驗證 在除錯時,先對您的 進行驗證往往能省去不少麻煩事。格式不正確的xhtml css 會導致許多布局上的錯誤。在其他瀏覽器中進行測試之前,...

專案管理的20條錦囊妙計

即使在最完美的條件下,管理乙個軟體專案也是很困難的。不幸的是,許多新專案經理實質上沒有受到任何就職培訓。這裡有20個成功的管理經驗供專案經理參考。不過,只依靠某一兩條 妙計 是無法順利完成專案的。1.定義專案成功的標準?在專案的開始,要保證各方對於判斷專案是否成功有統一的認識。通常,跟緊預定的進度是...

IT專案管理的20條錦囊妙計

即使在最完美的條件下,管理乙個軟體專案也是很困難的。不幸的是,許多新專案經理實質上沒有受到任何就職培訓。這裡有 20個成功的管理經驗供專案經理參考。不過,只依靠某一兩條 妙計 是無法順利完成專案的。1.定義專案成功的標準 在專案的開始,要保證各方對於判斷專案是否成功有統一的認識。通常,跟緊預定的進度...