摘要：經(jīng)典方法三欄布局的方法有很多種，其中最經(jīng)典的方法莫過于圣杯布局和雙飛翼布局。而雙飛翼布局方法無需相對位置屬性，而是采用為中欄內(nèi)容創(chuàng)建的方式，通過來實現(xiàn)布局。文章第二部分闡述了流行的圣杯布局方法和雙飛翼布局方法的細節(jié)和異同。

三欄是CSS布局中常見的一種布局模式，顧名思義，就是將網(wǎng)頁內(nèi)容以三列的形式呈現(xiàn)。通常，三欄布局中的左欄和右欄是固定寬度的，中欄隨著窗口寬度的變化而變化。本文探討欄三欄的基本實現(xiàn)思路和經(jīng)典方法，對其中涉及到的知識點進行梳理。

目的：實現(xiàn)一個左欄和右欄寬300px，中間欄寬度自適應(yīng)的三欄布局

首先，常規(guī)思路，我們寫出3個div的HTML和CSS，分別是leftColumn(左欄)、middleColumn(中欄)和rightColumn(右欄)。

HTML：

    
    
左欄
    
中欄
    
右欄

CSS：

#leftDiv {
    height: 300px;  /*高度設(shè)為300像素，下同*/
    background-color: rgb(60,139,176);  /*設(shè)置背景顏色*/
}

#middleDiv {
    height: 300px;
    background-color: rgb(225,236,214);
}

#rightDiv {
    height: 300px;
    background-color: rgb(122,122,122);
}

此時，得到的網(wǎng)頁如下圖所示：

這是因為div的特性：默認寬度最大化(頁面的100%)，默認高度最小化(根據(jù)內(nèi)容自適應(yīng))。

上面的CSS中，只指定欄高度height:300px，未指定寬度，所以每個div都以寬度width:100%填滿所在行。

注意：此時若嘗試指定每個div的寬度，例如給每個div的CSS添加語句:

width: 100px;

得到的頁面如下圖左圖，而非右圖。

這是因為div屬于塊級(block)元素，默認情況下，塊級元素總是會另起一行。

為了使塊級元素能位于同一行，最簡單的方法是使用float屬性。我們對每個div的CSS新增語句：

#leftDiv,#middleDiv,#rightDiv {
    float: left;  /*向左浮動*/
    height: 300px;  
}

使其向左浮動,得到的效果如下圖所示：

可以看到，對CSS設(shè)置float:left屬性后，三欄位于了同一行，寬度為其內(nèi)容的適應(yīng)寬度。此時，我們將左欄和右欄寬度設(shè)置為300px：

#leftDiv,#rightDiv {
    width: 300px;  /*設(shè)置寬度為300像素*/
    ... 
}
#middleDiv {
    ...
}

得到的效果如下圖所示：

此時，中欄的寬度仍為其內(nèi)容的適應(yīng)寬度，我們?yōu)閙iddleDiv添加如下語句：

width: calc(100% - 600px);  /*設(shè)置middleDiv寬度*/

calc()的作用為動態(tài)計算長度值，允許各種單位混合運算，運算符前后需有空格。

于是我們得到了最終效果。左欄和右欄各300px寬，中欄根據(jù)瀏覽器窗口大小進行動態(tài)調(diào)整。但需要注意的是，當瀏覽器窗口寬度小于600px時，中欄的寬度將小于0。為此，我們可以為瀏覽其設(shè)置最小調(diào)整寬度，避免頁面混亂：

body {
    min-width: 700px;
}

至此，一個三欄布局就完成了。這種實現(xiàn)思路比較符合人的思維定勢，但也存在一定的缺陷：瀏覽器加載和渲染頁面遵循從上到下的原則，這種方法中，HTML的middleDiv(中欄)位列于leftDiv(左欄)之后，所以會在leftDiv之后加載，而middleDiv往往是頁面的核心，需要優(yōu)先加載展示給用戶。

于是，我們思考將middleDiv放在HTML中的首位：

    
    
中欄
    
左欄
    
右欄

CSS中，我們?nèi)匀辉O(shè)置middleDiv(中欄)的寬度為100% - 600px：

#middleDiv {
    width: calc(100% - 600px);
    ...
}

此時的界面如圖所示：

可以看到，由于我們在HTML中將middleDiv(中欄)放在欄首位，所以瀏覽器窗口中，中欄顯示在最前面。這時，我們需要為leftDiv(左欄)騰出空間，可以使用margin-left或padding-left。

margin和padding分別為盒模型的外邊距和內(nèi)邊距，此處使用兩者皆可，此處唯一的區(qū)別是padding會被底色填充而margin不會。因為background-color的填充區(qū)域為content+padding+border。
還有一點需要注意的是，padding值不能為負，對于需要取負值時，僅可使用margin。

為middleDiv(中欄)添加以下語句：

margin-left: 300px;

此時效果如下圖所示：

可以看到，由于增加了300px的外邊距，第一行的橫向空間被middleDiv(中欄)和leftDiv(左欄)填滿，rightDiv(右欄)被迫位列第二行。

此時，我們使用relative屬性對左欄和右欄進行處理：

#leftDiv {
    position: relative;  /*相對定位*/
    left: calc(300px - 100%);  /*左移*/
    ...
}

#rightDiv {
    position: relative;
    top: -300px;  /*上移*/
    left: calc(100% - 300px);  /*右移*/
    ...
}

至此，我們在保證middleDiv(中欄)先行加載渲染的條件下，完成了三欄布局?；舅悸窞橥ㄟ^相對定位實現(xiàn)。

CSS三欄布局的方法有很多種，其中最經(jīng)典的方法莫過于圣杯布局和雙飛翼布局。圣杯布局因形似圣杯而得名，即中欄為杯身，左右兩欄為杯耳。雙飛翼布局則是圣杯布局的一種改進，去掉了relative屬性，并為主體部分增加了內(nèi)容嵌套。

圣杯布局和雙飛翼布局都需要在HTML中為div增加一層“容器(container)”。這個容器的目的主要是為了利用padding對中欄進行調(diào)整。

  
    
  
        
中欄
        
左欄
        
右欄
    

首先，仍然設(shè)置float:left屬性使div浮動，使其位于一行。

#leftDiv,#middleDiv,#rightDiv {
   float: left;
   ...
}

然后，將middleDiv(中欄)的寬度width設(shè)為100%：

#middleDiv {
    width: 100%;
    ...
}

得到如下圖所示的布局：

此時，需要將leftDiv置于第一行左側(cè):

margin-left: -100%;  /* 左側(cè)邊界前移100% */

這樣處理的結(jié)果是leftDiv(左欄)被置于第一行最左端，但會覆蓋middleDiv(中欄)的部分內(nèi)容。我們需要將中欄的內(nèi)容從被覆蓋的地方拉出來。一個簡便的方法是對父容器container使用margin：

#container {
    margin: 0 300px 0 300px;
}

此處使用padding:0 300px 0 300px; 效果相同。

此時，leftDiv(左欄)也會受父容器的影響向右移動300px，仍然覆蓋著middleDiv(中欄)的一部分，所以我們使用相對定位讓其向左移動：

#leftDiv {
    position: relative;
    left: -300px;
    ...
}

此時的布局如下圖所示：

對rightDiv(右欄)作類似處理：

#rightDiv {
    margin-left: -300px;  /*左側(cè)邊界前移300px*/
    position: relative;
    right: -300px;  /*右側(cè)邊界右移300px*/
    ...   
}

不要忘記為body設(shè)定最小寬度：

body {
    min-width: 800px;
}

至此完成。

可以看到，圣杯布局的實現(xiàn)思想是給div套上一個父容器，通過調(diào)整父容器的padding和div左右欄的相對定位來實現(xiàn)三欄布局。

雙飛翼布局，源于淘寶UED，是圣杯布局的一種改進，或者說是另一種三欄實現(xiàn)思路。其創(chuàng)新點在于額外為middleDiv(中欄)增加一個子div存放其內(nèi)容。

  
    

        

            
中欄
        
        
左欄
        
右欄
    

仍然使用float屬性來對div進行浮動：

#leftDiv,#middleDiv,#rightDiv {
   float: left;
   ...
}

與圣杯類似，設(shè)置middleDiv(中欄)寬度為100%，且將leftDiv(左欄)拉到最左側(cè)，將rightDiv(右欄)作類似處理：

#middleDiv {
    width: 100%;
    ...
}

#leftDiv {
    margin-left: -100%;
}

#rightDiv {
    margin-left: -300px;
}

到這一步為止，雙飛翼布局方法和圣杯CSS方法并不不同。

此時，由于雙飛翼布局方法為middleDiv(中欄)多帶帶添加了一個div存放其內(nèi)容，所以對于中欄的處理，可以使用該div的margin屬性：

#content {
    margin: 0 300px 0 300px;
}

此處使用padding:0 300px 0 300px; 效果相同。

同樣，不要忘記為body設(shè)定最小寬度：

body {
    min-width: 800px;
}

至此完成。

可見，圣杯布局方法與雙飛翼布局方法的區(qū)別在于圣杯布局采用相對位置屬性(position:relative)來調(diào)整左欄和右欄位置，并使用margin/padding屬性調(diào)整中欄。而雙飛翼布局方法無需相對位置屬性，而是采用為中欄內(nèi)容創(chuàng)建div的方式，通過margin/padding來實現(xiàn)布局。

本文探討了三欄布局的CSS基本實現(xiàn)方法，首先以基本思路對三欄布局進行實現(xiàn)，發(fā)現(xiàn)不足，進行調(diào)整。文章第二部分闡述了流行的圣杯布局方法和雙飛翼布局方法的細節(jié)和異同。除本文所述布局方法外，還存在絕對定位法、table布局法、網(wǎng)格布局法，以及十分方便的flex布局法等多種方法，各有利弊。

本文僅探討了三欄布局的基本實現(xiàn)思路與方法，詳細的實現(xiàn)過程希望能夠幫助大家深入理解CSS。關(guān)于其他方法的討論將在以后實際應(yīng)用時進行總結(jié)。