[轉]CSS網站布局-譯自CSS禅意花園

​

網站布局

用CSS進行頁面布局需要了解很多不同的技術，設計師也要有相當的創造性思維。無論選擇固定布局或流式布局，無論作品靠左還是居中對齊，都需要對CSS布局有着良好的把握能力。

布局基礎

在用CSS實作分欄布局之前，需要了解一些預備知識。CSS并沒有提供諸如“left-column:200px”之類的直覺分欄屬性，是以我們必須要用一些技巧來突破這些限制。

實作分欄布局主要有兩種方法，每種都各有利弊。第一種方法是使用四種CSS定位選項（absolute 、static、relative和fixed）中的絕對定位（absolute positioning），它可以将文檔中的某個元素從其原本位置上移除，并重新定位在期望的任何地點之上。第二種則是使用CSS中的浮動（float）概念。浮動并不是一種用作定位的選項，而是為元素配置設定一定的空間，然後讓文檔中的其他部分将自動環繞在其周圍。

絕對定位或浮動都能夠用來實作分欄效果。二者可以獨立使用，也可以結合在一起，相輔相成。

絕對定位

與浮動相比，絕對定位顯得易于了解。若在文檔中依次聲明了一系列元素（簡稱為正常文檔流，normal document flow），就像下面這段HTML這樣，那麼這些元素将會按照聲明次序顯示在頁面中—沒有什麼特别的。

<h1>This is a header</h1>

<p>This is some text</p>

<p>And even more text</p>

但若是用絕對定位将某一進制素（這裡是h1元素）移動到指定位置，那麼該元素原來占據的空間将消失。絕對定位的元素也不會對其旁邊的元素帶來任何影響，就像文檔中根本不存在這個元素一樣（雖然實際上在頁面中仍能看到）。實作絕對定位的代碼如下：

h1 {position: absolute; top: 100px; }

絕對定位的優勢在于，我們可以絲毫不差地精确控制任何元素的位置—這裡面沒有什麼需要猜測或者運氣的成分。由于應用了絕對定位的元素被不留痕迹地從正常文檔流中完全移除，是以它也不會為其他元素帶來任何的影響。

絕對定位模型中有個極為有用的特性，那就是若某個絕對定位元素的容器也被定位過，那麼該元素指定的top和left值将不會基于文檔的根元素html（也就是浏覽器視窗的左上角）計算，而是會基于其容器的左上角計算這個偏移量。

浮動

與絕對定位相比，浮動更加具有技巧性。

浮動的文法看似簡單，但卻并不那麼容易完全掌握。

采用浮動實作布局的優勢在于，浮動元素仍保留在文檔流中，其周圍環繞的元素也都清楚它的位置。

因為浮動布局依然遵循正常文檔流，是以與絕對定位相比，浮動定位時HTML源檔案中元素聲明的位置顯得格外重要。

但由于不同的浏覽器對浮動的支援良莠不齊，是以浮動布局也并不是完美之選。是以，隻有有了相當的實踐經驗之後，我們才能夠在設計時遊刃有餘，合理地選擇并使用上述兩種布局方法。

絕對定位的補充

我們有理由相信，在許多情況下，絕對定位是最簡單易學且最行之有效的一種布局方法。

但絕對定位也不是萬能的，使用時也難免會遇到一些問題。對于那些需要考慮頁腳，或是頁面中其他元素需要了解其周圍元素的頁面布局來說，浮動則将成為不二之選，無論絕對定位還是浮動都談不上完美，但它們卻組成了CSS中的最具可操作性的布局工具。合理恰當地選擇某種方法，或者組合使用這兩種方法，将能夠随心所欲地控制頁面的布局—唯一可能讓作品受到限制的就是創造力。

固定布局和流式布局

按照慣例，Web頁面的布局可以分為兩類：固定布局和流式布局。固定布局是指頁面有着固定的寬度，居左、居右（這種情況比較少見）對齊，或者居中。但頁面内容的寬度卻不随着浏覽器視窗的寬度變化而變化。

流式布局又叫不固定（fluid）布局或動态（dynamic）布局。這種布局的頁面寬度用百分比指定，而不是某個固定的寬度，是以當浏覽器視窗大小變化時，頁面寬度也随之變化，始終保持填滿浏覽器。

我們同樣也可以将固定布局和流式布局結合起來使用。例如對于某個三欄頁面來說，左右兩欄可能有着固定的寬度，但中間一欄的寬度卻用百分比定義（或者不定義去寬度）。這樣，作品将始終填滿浏覽器視窗，在改變浏覽器視窗大小，或是在不同分辨率下浏覽該頁面時，中間一欄的寬度将相應的變大或變小。

就像許多其他流行的東西一樣，人們對固定布局和流式布局的偏好和傾向也在不停地變化。在早期的Web設計中，固定布局曾風靡一時。但一段時間之後，人們開始認識到流式布局的好處，幾年中流式布局又變得如日中天。

在過去的兩年中，固定布局似乎再一次占據了上風—特别是在那些推崇标準的設計師眼中。在此時刻，幾乎所有的業内領先者都在他們的網站或作品中使用了固定布局。這是個很有意思的傾向，之是以人們再次開始鐘情于固定布局，是因為他們主要考慮了如下幾個明顯問題。

首先，也是最重要的一點就是，由于作品區域大小固定，是以設計師在控制固定布局頁面時将更加遊刃有餘。即使對于圖文混排的情況，一行中文字的長度同樣易于控制。固定布局的再次流行在很大程度上正是因為這些原因。

當然，流式布局也有它的優勢所在。填滿浏覽器視窗意味着最大限度地利用了空間，且與那些居左對齊的固定寬度作品相比，流式布局設計避免了另一半頁面的空白，顯得更為平衡。流式布局的劣勢在于我們無法精确控制行長、頁面布局以及元素的位置。即使對于那些資深設計師來說，這些問題也都值得仔細斟酌，且現今也沒有什麼完美的解決方案。

對于固定布局作品導緻的視覺失衡問題，設計師一般通過讓作品水準居中顯示來解決，這樣當改變浏覽器視窗大小時，空白部分将始終平均配置設定在頁面的左右兩側，不至于讓頁面的右側顯得太過單調。