如何進行CSS布局

sj33cn — Tue, 18 Mar 2008 01:32:00 +0000

HTML的局限性迫使設計師們去開發更聰明的方式來使他們的網頁更美觀。過去最常用的工具是

標簽，它本是用來創建電子數據表――比如由數據行和列組成的信息顯示表。但是設計師們卻用HTML的表格來創建一種用來組織網頁內容的腳手架（見圖11-1）?？墒怯捎?lt;table>標簽本來不是要用于布局的，因此設計師們不得不經常以各種不尋常的方式來使用這個標簽――比如把一個表格放在另一個表格的單元里面――僅僅為了得到他們想要的效果。這種方法的工作量很大，增加了大量額外的HTML代碼，并使得后面要修改設計很難。但是在CSS出現之前，那就是網頁設計師們所擁有的一切辦法。

　　如果你已經習慣于使用

標簽，那么當你開始使用CSS進行布局時，必須發展一種新的思維。首先，忘掉行和列（運用表格時的一種重要的觀念）。沒有列跨度、行跨度和格子狀的表格結構在CSS中是找不到的。然而，你可以把一個

標簽當成一個表格單元。有了表格單元，

標簽就是把你要的內容定位在網頁區域的一個邏輯位置。此外，如你所見，CSS設計經常把一個div嵌套在另一個div里面，就像你把表格嵌套在表格里面來獲得特定的效果一樣――但是，幸運的是，CSS方法只用少得多的HTML代碼。

　　強大的

標簽
　　The Mighty

Tag

　　無論使用表格還是CSS，網頁布局都是把大塊的內容放進網頁的不同區域里面。有了CSS，最常用來組織內容的元素就是

標簽。如第18頁所述，

標簽是沒有固有格式化屬性的一個HTML元素（除了瀏覽器把這個標簽當成前后有換行的塊之外）；反之，它被用來標識元素的一個邏輯組合或者網頁中的一個分區。

　　你將代表性地把一大塊屬于一起的HTML包圍在一個

里面。圖11-1中包含logo和導航欄的元素占據了網頁頂部，因此用一個

標簽把它們包圍起來很有意義。至少，你要給網頁的所有主要區域包含

標簽，例如橫幅、主要內容區域、工具條、頁腳，等等。但是它也可能把一個或者更多的div包在一個

里面。一種最常用的方法就是把標簽里面的HTML包在一個

里面。然后可以通過把CSS應用到包裝

，設置基礎的頁面屬性。你可以給網頁內容設定一個整體的寬度，設置左邊距和右邊距，或者把所有網頁內容在屏幕的中間居中。

　　一旦已經把

標簽放在了適當的位置上，再給每個

標簽添加一個類或者ID，變成你分別對每個

定義樣式的句柄。對于只出現一次和形成網頁的基本構建塊的網頁部位，設計師們通常使用一個ID。一個網頁橫幅區域的

標簽看起來可能像這樣：。你可以對一個ID每頁只使用一次，因此當有一個多次顯示的元素時，就用一個類代替。如果你有幾個定位照片和照片說明的div時，可以創建一個樣式像這樣：。

　　有了類似這些的樣式，就可以定位各種各樣的網頁元素了。利用CSS的float屬性，你可以定位不同的內容塊給一張網頁的左邊或者右邊（或者一個包含塊比如另一個

的左邊或者右邊）。

　　至理名言
　　更多并非更好

　　雖然div對于CSS布局很重要，但也別對你的網頁濫用div。一個常見的陷阱是相信你必須把一張網頁中的一切都包圍在一個

標簽里面。假設你的主導航欄是一個鏈接的無序列表。由于它是一個重要的元素，你可能會試探用一個

來把它圍起來：

…

。但是當

了。只要

。多余的

只是一些沒有必要的代碼。

CSS布局需要掌握的8個你技巧

sj33cn — Tue, 18 Mar 2008 01:19:00 +0000

1.若有疑問立即檢測

　　在出錯時若能對原始代碼做簡單檢測可以省去很多頭痛問題。W3C對于XHTML與CSS 都有檢測工具可用，請見 http://validator.w3.org 。請注意，在文件開頭的錯誤，可能因為不當的結構等因素造成更多錯誤；我們建議先修正一些最明顯的錯誤之后重新檢測，這樣也許會讓錯誤數量爆減。

2.使用浮動功能時記得適當清除指令

　　浮動是個危險的功能，未必會產生您所期望的結果。如果您遇到浮動元素延伸到外圍容器的邊框或者其他不正常情況，請先確定您的做法是正確的。請參閱Eric Meyer 在Complex Spiral Consulting Web 網站上的教學。

3.邊界重合時利用padding或border來避免

　　您可能會為了一點不應該出現的空間而焦頭爛額，或者您需要一點點空間時，怎樣都擠不出來。如果您有用到margin，那么很容易產生邊界的重合；Andy Budd在他的網站上解釋了可能的做法。

4.嘗試避免同時對元素指定padding/border以及高度或寬度

　　Windows版IE經常導致width與height的計算問題。有些方法可以解決此問題，但如果母元素需要指定高度與寬度時，最好能夠在母元素之內的子元素套用margin,或者當子元素需要指定高度與寬度時，在母元素套用padding以達效果。

5.不要依賴min-width/min-height

　　Windows版IE并不支援兩種語法。但是在某種程度下，windows版IE可以達到相當于min-width/min-height的效果，所以只要對IE做點過濾功能，即可達到您想要的結果。

6.若有疑問，先減少百分比

　　有時候某些錯誤會使50%+50%成為100.1%，使網頁出現問題。這時請嘗試將這些值改為49%，甚至49.9%。

7.記住“TRouBLed”寫法

　　Border，margin與padding的簡寫語法有特定順序，從上方開始順時針方向轉動：top,right,bottom,left. 所以margin:0 1px 3px 5px;的結果是上方無邊界，右邊1像素，以此類推。記住“TRouBLe”，您就不會弄錯次序了。

8.只要不是零的值，都要指定單位

　　CSS需要您對每個font，Margin等各種值指定單位。（唯一的例外是line-height）