CSS 的主要好處之一是，它能夠控制頁面佈局而不需要使用表現性標籤。但是，CSS佈局被誤認爲是難以理解的，在初學者中，這種想法尤其普遍。這在一定程度上是由於瀏覽器的不一致造成的，但主要原因是 Web 上不同佈局技術的數量激增所致。似乎每個 CSS 作者都用自己的技術創建多列的佈局，而且新的 CSS 開發人員常常使用一種技術卻不真正瞭解它的工作原理。這種進行 CSS 佈局的 "黑盒" 方法可能會迅速地得到想要的結果，但是最終會阻礙開發人員理解這種語言。
所有 CSS 佈局技術都依賴於三個基本概念：定位、浮動和空白邊操縱。不同的技術其實沒有本質的差異，而且如果理解了核心概念，那麼創建自己的佈局是相當容易的。
在本章中，你將學習：
- 讓設計在頁面中水平居中。
- 創建兩列和三列的基於浮動的佈局。
- 創建固定寬度、流體和彈性佈局。
- 將列拉長到整個可用空間的高度。
7.1 讓設計居中
7.1.1 使用自動空白邊讓設計居中
爲了讓這個方法在所有瀏覽器中都能夠順利地工作，需要做最後一件事情。在 Netscape 6 中，當瀏覽器窗口的寬度減少到小於容器的寬度時，容器的左邊會跑到屏幕的外邊，就無法訪問它了。爲了防止這種現象，需要將主體元素的最小寬度設置爲等於或略大於容器元素的寬度：
body {
text-align: center;
min-width: 760px;
}
#wrapper {
width: 720px;
margin: 0 auto;
text-align: left;
}
現在，如果試圖將窗口的寬度減少到小於容器 div 的寬度，就會出現滾動條，使用戶能夠訪問所有內容。
7.1.2 使用定位和負值空白邊讓設計居中
到目前爲止，使用自動空白邊進行居中的方法是最常用的，但是它需要用一個招數來滿足 IE5.x 的要求。它還要求對兩個元素而不只是一個元素應用樣式。因此，有些人喜歡使用定位和負值空白邊來代替這種方法。
與前面一樣，首先定義容器的寬度。然後將容器的 position屬性設置爲 relative ，將 left 屬性設置爲 50%。這會把容器的左邊緣定位在頁面的中間。
#wrapper {
width: 720px;
position: relative;
left: 50%;
}
但是，並不希望讓容器的左邊緣居中，而是希望讓容器的中間居中。實現的方法是對容器的左邊應用一個負值的空白邊，寬度等於容器寬度的一半兒。這會把容器向左邊移動它的寬度的一半，從而讓它在屏幕上居中：
#wrapper {
width: 720px;
position: relative;
left: 50%;
margin-left: -360px;
}
選擇使用哪種居中技術是個人喜好問題。但是，同時掌握多種技術總是有好處的，因爲不知道什麼時候某種技術正好合適。
7.2 基於浮動的佈局
用CSS 進行佈局有幾種不同的方式，包括絕對定位和使用負值空白邊。我發現基於浮動的佈局是最容易使用的方法。顧名思義，在基於浮動的佈局中，只需設置希望定位的元素的寬度，然後將它們向左或向右浮動。
因爲浮動的元素不再佔據文檔流中的任何空間，它們就不再對包圍它們的塊框產生任何影響。爲了解決這個問題，需要對佈局中各個點上的浮動元素進行清理。非常常見的做法是，不對元素進行連續地浮動和清理，而是浮動幾乎所有東西，然後在這個文檔的 "戰略點" (比如頁腳) 上進行一次或兩次清理。
7.2.1 兩列的浮動佈局
要想使用浮動創建簡單的兩列布局，首先需要有一個基本的 (X)HTML 框架。在下面的示例中，(X)HTML 由品牌區域、內容區域、主導航區域和最後的頁腳組成。整個設計包圍在一個容器 div 中，這個div 使用前面介紹的方法之一進行水平居中：
這個設計的主導航區域將位於頁面的左邊，內容位於右邊。但是，爲了易用性和可訪問性，在源代碼中將內容區域放在導航的前面。首先，主內容是頁面上最重要的東西，所以在文檔中應該先出現。其次，這樣可以方便屏幕閱讀器用戶，他們用不着經過可能很長的鏈接列表才找到內容部分。
在創建基於浮動的佈局時，一般將兩列都向左浮動，然後使用空白邊或填充在兩列之間創建一個隔離帶。在使用這種方法時，列在可用空間內包得很緊，沒有喘息的空間。如果瀏覽器表現良好的話，那麼這不是問題；但是差勁的瀏覽器會打亂緊密的佈局，迫使一列退到另一列的下面。
在 IE 上就會發生這種情況，因爲 IE/Win 考慮元素內容的尺寸，而不是元素本身的尺寸。在符合標準的瀏覽器中，如果元素的內容太大，它只會超出框之外。但是，在 IE/Win 上，如果元素的內容太大，整個元素就會擴展。如果這發生在非常緊密的佈局中，那麼就沒有足夠的空間可以讓元素並排出現，浮動元素之一就會退到下面去。
*****其他IE bug (比如 3像素文本偏移 bug 和雙空白邊浮動 bug ，見第9章) 也會導致浮動元素下降。******
爲了防止發生這種情況，需要避免浮動佈局在包含它們的元素中太擠。可以不使用水平空白邊或填充來建立隔離帶，而是將一個元素向左浮動，另一個元素向右浮動，從而創建視覺上的隔離 (見圖 7-2)。如果一個元素的尺寸意外地增加了幾個像素，那麼它不會立刻佔滿水平空間並下降，而只是擴展到視覺隔離帶中。
實現這個佈局的 CSS 非常簡單。只需爲每個列設置想要的寬度，然後將導航向左浮動，將內容向右浮動：
#content {
width: 520px;
float: right;
}
#mainNav {
width: 180px;
float: left;
}
然後，爲了確保頁腳正確地定位在這兩個浮動元素的下面，需要清理頁腳：
#footer {
clear: both;
}
基本的佈局現在完成了。還需要做一些小調整以便讓佈局更有條理。首先，導航區域中的內容一直頂到容器的邊緣上，這不太好看，需要留出點兒空間。****可以直接在導航元素上添加水平填充，但是這會調用 IE5.x 專有的框模型。爲了避免這種情況，將水平填充添加到導航區域的內容上****：
內容區域的右邊也一直頂到容器的右邊緣上，也需要留出點兒空間。同樣，並不把填充直接應用到元素上，而是把填充應用到內容上，從而避免處理 IE 的框模型問題：
#content h1, #chontent h2, #content p {
padding-right: 20px;
}
現在完成了想要的效果：一個簡單的兩列CSS佈局 (見圖 7-3) 。
7.2.2 三列的浮動佈局
創建三列布局所需的 HTML 與兩列布局的 HTML 非常相似，惟一的差異性是在內容 div 中添加了兩個新的 div ：一個用於主內容，另一個用於次要內容。
可以使用與兩列布局技術相同的 CSS，在已經浮動的內容 div 中，將主內容向左浮動，將次要內容向右浮動 (見圖 7-4)。這本質上就是將內容列分成兩列，從而形成三列的效果。
與前面一樣，所用的 CSS 非常簡單。只需設置想要的寬度，然後將主內容向左浮動，將次要內容向右浮動：
#mainContent {
width: 320px;
float: left;
}
#secondaryContent {
width: 180px;
float: right;
}
可以將填充從內容元素上去掉，並且將它們應用於次要內容的內容上，從而讓佈局顯得更有條理：
#secondaryContent h1, #secondaryContent h2, #secondaryContent p {
padding-left: 20px;
padding-right: 20px;
}
這樣就形成了一個漂亮的三列布局 (見圖 7-5)。
