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

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

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

首先，常規(guī)思路，我們寫出3個(gè)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);
}

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

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

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

注意：此時(shí)若嘗試指定每個(gè)div的寬度，例如給每個(gè)div的CSS添加語(yǔ)句:

width: 100px;

得到的頁(yè)面如下圖左圖，而非右圖。

這是因?yàn)閐iv屬于塊級(jí)(block)元素，默認(rèn)情況下，塊級(jí)元素總是會(huì)另起一行。

為了使塊級(jí)元素能位于同一行，最簡(jiǎn)單的方法是使用float屬性。我們對(duì)每個(gè)div的CSS新增語(yǔ)句：

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

使其向左浮動(dòng),得到的效果如下圖所示：

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

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

得到的效果如下圖所示：

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

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

calc()的作用為動(dòng)態(tài)計(jì)算長(zhǎng)度值，允許各種單位混合運(yùn)算，運(yùn)算符前后需有空格。

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

body {
    min-width: 700px;
}

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

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

    
    
中欄
    
左欄
    
右欄

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

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

此時(shí)的界面如圖所示：

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

margin和padding分別為盒模型的外邊距和內(nèi)邊距，此處使用兩者皆可，此處唯一的區(qū)別是padding會(huì)被底色填充而margin不會(huì)。因?yàn)閎ackground-color的填充區(qū)域?yàn)閏ontent+padding+border。
還有一點(diǎn)需要注意的是，padding值不能為負(fù)，對(duì)于需要取負(fù)值時(shí)，僅可使用margin。

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

margin-left: 300px;

此時(shí)效果如下圖所示：

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

此時(shí)，我們使用relative屬性對(duì)左欄和右欄進(jìn)行處理：

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

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

至此，我們?cè)诒ＷCmiddleDiv(中欄)先行加載渲染的條件下，完成了三欄布局?；舅悸窞橥ㄟ^相對(duì)定位實(shí)現(xiàn)。

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

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

  
    
  
        
中欄
        
左欄
        
右欄
    

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

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

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

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

得到如下圖所示的布局：

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

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

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

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

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

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

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

此時(shí)的布局如下圖所示：

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

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

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

body {
    min-width: 800px;
}

至此完成。

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

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

  
    

        

            
中欄
        
        
左欄
        
右欄
    

仍然使用float屬性來對(duì)div進(jìn)行浮動(dòng)：

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

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

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

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

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

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

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

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

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

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

body {
    min-width: 800px;
}

至此完成。

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

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

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