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

來源:互聯網
上載者:User

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

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

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

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

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

 

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.