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

From : http://hi.baidu.com/liuyang1984/blog/item/28bba545456dee3a869473c7.html

 

 

網站布局

用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設計中，固定式配置曾風靡一時。但一段時間之後，人們開始認識到流式布局的好處，幾年中流式布局又變得如日中天。

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

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

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

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