上篇講的佈局(切割)方法相信大家己經掌握，其特點是用固定寬度(fixed-width)來實現頁面內各個元素的顯示效果，簡單實用，易於掌握。本篇將講述其他相對高級的佈局方法。
佈局的分類,根據對元素寬度的定義不同，佈局可分爲以下幾種：
1. 固定寬度(fixed-width)佈局：
即上一篇所用到的佈局方法，其特點是主要DIV的寬度都是用固定大小的px值定義的，其寬度不隨瀏覽器及字體大小的影響。多以px作爲寬度單位。
優點：寬度固定，最爲保真地表現作者的設計意圖；簡單易學。
缺點：它是這幾種佈局方法中最爲“自私”的，因爲其不考慮訪客的瀏覽設備及設置。比方說，在1024寬的瀏覽器表現良好的佈局，到了1600以上的寬屏瀏覽器就顯得較爲侷限，其可能縮於屏幕一側或是中央。
現狀：由於其簡單易用，且基本滿足大部分訪客的需求，仍是主要的佈局方法，尤其在大陸。
趨勢：隨着液晶屏幕的發展和普及，成本的下降，市面上寬屏顯示器已經開始大量涌現，尤其在西方發達國家，1600的寬屏顯示器漸成主流，所以在800或是1024下顯示良好的，使用固定寬度的佈局方法已經開始被邊緣化。
站點舉例：網易
藍色理想
2. 自適應(liquid)佈局：
即根據用戶瀏覽器的寬度，自動調整寬度顯示的佈局方法。以%作爲寬度單位。
優點：自動適應各種屏幕寬度，輕鬆實現滿屏顯示。
缺點：如果屏幕過寬，而內容有不多的情況下，文字可能拉伸得很長，影響美觀。而當屏幕過窄時，內容又會被壓縮得很窄，可讀性下降。
現狀：目前很多的web2.0站點使用%來實現佈局，即自適應訪客的屏幕寬度。
趨勢：就目前的情況看來，沒有哪一個屏幕分辨率能夠統一整個市場，所以800，1028，1280，1600等各種寬度的瀏覽器會各據一方，並且只會越來越寬，liquid佈局以其良好的自適應能力將成爲主要的佈局方法。
站點舉例：Google
Cssliquid
3. 彈性（elastic）佈局：
所謂彈性，是針對字體大小而言的，當用戶調整字體大小時，寬度會隨字體大小的變化而變化。以字體高em作爲寬度單位。
優點：滿足了視力下降人士的需求，不管用戶如何調整字體大小，頁面佈局都不會被打亂；
缺點：當用戶不調整字體大小時，其效果和固定寬度佈局的效果其實是一樣的，即不會隨屏幕的大小的變化而自適應；對於初學者不易掌握。
現狀：彈性佈局方法是目前較爲少用的一種。
趨勢：由於其能自動適應字體大小，且在用戶不調整字體大小時，有固定的寬度，所以它將是固定寬度佈局的不錯的替代方法。
站點舉例：BlueAnvil
Designbit(可能需要代理瀏覽)
4. 混合佈局：
即在一個頁面內用兩種以上的佈局方法。比方說對於內容DIV使用%，而在邊框DIV則使用em作爲寬度單位。
如何選擇適合你的佈局方法：
在選擇佈局方法時，你需要考慮以下兩個方面：
1.你的原始設計：
當你的原始設計的寬度固定，或是寬度過大會影響美觀的話，Jorux建議你使用彈性佈局。
2.用戶羣的分佈：
如果你的用戶羣數量巨大，也就是說使用各種屏幕分辨率的用戶都會達到一個可觀的數量，那麼你在佈局時就應該考慮使用自適應的方法佈局。並且在設計時考慮到這點，設計出在各種寬度下拉伸都基本保持美觀的作品。
你可以看到，固定寬度的佈局方法已經不是Jorux的推薦方法。這也是Jorux寫這篇文章的原因，大家應該秉持以用戶爲中心的設計理念，更好地適應各種客戶端及其設置。本站也會很快改寫CSS。
怎樣使用彈性佈局的方法實現佈局篇(1)中的效果：
1. 在body中設置font-size:62.5%，使得1em=10px；
2. 避免在任何DIV中聲明字體大小，這是爲了避免em的值因繼承父級元素的字體高而不斷變化，而在DIV的子元素中聲明字體大小。如在p,h1等選擇器中聲明。
3. 用em作爲寬度和高度單位，例如你想設置DIV寬度爲760px，那麼你需要將其設置爲76em。
那麼css代碼可以爲(僅供參考)：
* {
margin: 0;
padding: 0;
}
body{
font-size:62.5%;
background-color:#444;
}
#AllWrap {
float:left;
width: 76em;
background-color: white;
}
#Header {
height: 8em;
background-color: red;
}
#MidWrap {
}
#Content {
float:left;
width:56em;
height:40em;
background-color: white;
}
#Sidebar {
float:left;
width:20em;
height:40em;
background-color: green;
}
#Footer {
clear:both;
width:76em;
height: 8em;
background-color: blue;
}
你可以嘗試調整瀏覽器的字體大小，可以看到各個DIV也隨之變化。
如何用%實現自適應的佈局方法：
滿足以下條件：
1.滿屏顯示，及Header，(Content+Sidebar),Footer的寬度均自動適應屏幕寬度，並佔滿整個屏幕寬度；
2.Content佔70%屏幕寬，Sidebar佔30%，高度均爲400px；
3.Header和Footer的高度均爲爲80px；
4. 實現如下效果效果(點擊看大圖)：
讀者能在留言中給出你的答案嗎？
精彩在留言，請讀者踊躍解答，參與討論關於佈局的任何問題，Jorux將在留言中響應大家的提問或是解答。
Important reference:
1.
Going elastic with ems, layout techniques
2.
Fixed vs Liquid vs Elastic
3.
Create a simple liquid layout
4. Elastic Design
[END]