CSS網頁佈局中易犯的10個小錯誤

即使是CSS高手，也難免在書寫CSS代碼的時候出一些小錯誤，或者說，任何一種代碼都是如此。小錯誤卻往往造成大問題，浪費很多無辜的時間來調試和排錯。查看下面這份CSS網頁佈局中易犯的10個小錯誤，努力的修正你可能會犯的錯誤，加速你的前端開發效率。

1. 檢查HTML元素是否有拼寫錯誤、是否忘記結束標記即使是老手也經常會弄錯div的嵌套關系。可以用dreamweaver的驗證功能檢查一下有無錯誤。

2. 檢查CSS是否書寫正確檢查一下有無拼寫錯誤、是否忘記結尾的 } 等。可以利用CleanCSS來檢查 CSS的拼寫錯誤。CleanCSS本是為CSS減肥的工具，但也能檢查出拼寫錯誤。

3. 用刪除法確定錯誤發生的位置如果錯誤影響瞭整體佈局，則可以逐個刪除div塊，直到刪除某個div塊後顯示恢復正常，即可確定錯誤發生的位置。

4. 利用border屬性確定出錯元素的佈局特性使用float屬性佈局一不小心就會出錯。這時為元素添加border屬性確定元素邊界，錯誤原因即水落石出。

5. float元素的父元素不能指定clear屬性 MacIE下如果對float的元素的父元素使用clear屬性，周圍的float元素佈局就會混亂。這是MacIE的著名的bug，倘若不知道就會走彎路。

6. float元素務必指定width屬性很多瀏覽器在顯示未指定width的float元素時會有bug。所以不管float元素的內容如何，一定要為其指定width屬性。另外指定元素時盡量使用em而不是px做單位。

7. float元素不能指定margin和padding等屬性 IE在顯示指定瞭margin和padding的float元素時有bug。因此不要對float元素指定margin和padding屬性（可以在 float元素內部嵌套一個div來設置margin和padding）。也可以使用hack方法為IE指定特別的值。

8. float元素的寬度之和要小於100% 如果float元素的寬度之和正好是100%，某些古老的瀏覽器將不能正常顯示。因此請保證寬度之和小於99%。

9. 是否重設瞭默認的樣式？某些屬性如margin、padding等，不同瀏覽器會有不同的解釋。因此最好在開發前首先將全體的margin、padding設置為0、列表樣式設置為none等。

10. 是否忘記瞭寫DTD？如果無論怎樣調整不同瀏覽器顯示結果還是不一樣，那麼可以檢查一下頁面開頭是不是忘瞭寫下DTD聲明。

另外：參考css技巧-清除多餘的標簽讓代碼更加有意義

如果你是一個喜歡什麼都用<div>來標簽的人,那麼這個教程一定很適合你.在這個教程裡著重講如何規范的來寫HTML代碼讓它更加的 有意義.你有沒有經歷過這樣的場景:在編緝別人的模版時發現那些語意不明的標簽,你的感覺是什麼樣子的.學完這個教程後你會發現規范的代碼不僅僅為你以後 修改代碼省下時間,特別是當你調試一個大的項目時你會發現,原來規范代碼之後是那麼的有用.

1.清除不必要的<div>標簽

很多人都喜歡用<div>來包裹<form>和<ul>來建立菜單列表.你有沒有想過這樣一個多餘的<div>是不是需要的.你可以使用css規則來實現同樣的效果.

Example 1:

這個例子展示如何刪除<form>中的<div>.

Example 2:

有 時候我們會給內容添加一個額外的<div>標簽來以示這是一個內容.在事例中用瞭<div class="sidebox">來包括內容區.如果一個內容有一個標題的話(如:<h4>),那麼我們就可以把這個<h4& gt;來代替<div>.

2.使用有語義的標簽

用有語義的標簽來編寫你的HTML文檔(如:<h1>為標題;<p>為段落;<ul>為列表.)那麼即使用戶不支持css的話,那你的文檔也被正確的讀出來.

Example:

這個例子很好的說明瞭,使用有語義標簽的好處.

3.盡量減少使用<div>

你 有沒有見過那麼混亂的模板,到處都可以看到<div>標簽,看到這些,你的頭有沒有變大瞭.你是否因為少用</div>來結束標 簽,或者因為多用瞭<div>標簽而把一個佈局弄亂瞭.我想大多數初學者都有這樣的經歷.所以盡可能的少使用<div>,它會使 調試和編輯更加的容易.

Example 1:

使用<p>來代替<div>來創建導航.

Example 2:

看如何使用<span>來代替<div>實現同樣的效果.

4.格式(縮進)代碼

你應該格式源代碼(即縮進嵌套元素),以便於容易閱讀和修改.如果你使用DW來編寫代碼的話,那麼你就可以很方便的格式代碼.

5.在</div>標簽之後添加註解.

你 有沒有見過在一些模版在</div>之後有註明這一部分是什麼.(如:header;contant;footer.)所以你可以在< /div>之後加入一個<!--  footer -->.這樣別人就可以知道這是一個頁腳結束點.