（基礎）多欄佈局的三種基本實現方案

本文節選自《CSS設計指南（第3版》。
第1章完全免費試讀，電子書線上熱賣中：http://www.ituring.com.cn/book/1111

以下內容節選自第5章。

多欄佈局有三種基本的實現方案：固定寬度、流動、彈性。

• 固定寬度佈局的大小不會隨使用者調整瀏覽器視窗大小而變化，一般是900到1100畫素寬。其中960畫素是最常見的，因為這個寬度適合所有現代顯示器，而且能夠被16、12、10、8、6、5、4和3整除，不僅容易計算等寬分欄的數量，而且計算結果也能得到沒有小數的畫素數。

  流行的CSS佈局框架960 Grid（http://www.960.gs），就是基於960畫素寬的網格建立的。

• 流動佈局的大小會隨使用者調整瀏覽器視窗大小而變化。這種佈局能夠更好地適應大螢幕，但同時也意味著放棄對頁面某些方面的控制，比如隨著頁面寬度變化，文字行的長度和頁面元素之間的位置關係都可能變化。Amazon.com的頁面採用的就是流動中欄佈局，在各欄寬度加大時通過為內容元素周圍新增空白來保持內容居中，而且現在的導航條會在佈局變窄到某個寬度時收縮排一個下拉選單中，從而為內容騰出空間。

  今天，越來越多的瀏覽器都支援CSS媒體查詢了。這就讓基於瀏覽器視窗寬度提供不同的CSS樣式成為可能。在這種形勢下，適應各種螢幕寬度的可變固定佈局，正逐步取代流動佈局。這種可變的固定佈局能夠適應最大和最小的螢幕，業界稱之為響應式設計。本書第8章將專門介紹響應式設計相關的CSS技術。

• 彈性佈局與流動佈局類似，在瀏覽器視窗變寬時，不僅佈局變寬，而且所有內容元素的大小也會變化，讓人產生一種所有東西都變大了的感覺。到目前為止，我還沒見過設計得非常好的彈性佈局，主要是因為它太過複雜了。本章不介紹這種佈局，而只把筆墨花在固定寬度佈局和流動佈局上。

下面，我們先來看一看頁面的高度和寬度有什麼區別。