.布局前的認(rèn)知
1.1 三種基本方案

多欄布局有三種基本的實(shí)現(xiàn)方案：固定寬度、流動、彈性。

    固定寬度。布局的大小不會隨用戶調(diào)整瀏覽器窗口大小而變化，一般是 900 到 1100 像素寬（最常見的是 960 像素）。

    流動。布局的大小會隨用戶調(diào)整瀏覽器窗口大小而變化。（結(jié)合 CSS 媒體查詢，能夠適應(yīng)最大和最小的屏幕，業(yè)界稱之為 響應(yīng)式設(shè)計。）

    彈性。在瀏覽器窗口變寬時，不僅布局變寬，而且所有內(nèi)容元素的大小也會變化。（實(shí)現(xiàn)太過復(fù)雜，不多介紹。）

1.2 布局高度

多數(shù)情況下，布局中結(jié)構(gòu)化元素（乃至任何元素）的高度是 不必或者不應(yīng)該設(shè)定的。因?yàn)楸３衷?height 屬性的默認(rèn)值 auto 不變，才能使元素根據(jù)自己包含內(nèi)容的增加而在垂直方向上擴(kuò)展。這樣擴(kuò)展的元素會把下方的元素向下推，而布局也能隨內(nèi)容數(shù)量的增減而垂直伸縮。
1.3 布局寬度

為了使瀏覽器窗口寬度合理變化，布局能作出適當(dāng)?shù)恼{(diào)整，我們 需要精細(xì)地控制 布局寬度。
2.三欄-固定寬度布局

結(jié)構(gòu)如下：

上代碼：