圣杯布局和雙飛翼布局是前端工程師需要日常掌握的重要布局方式梁只。兩者的功能相同，都是為了實(shí)現(xiàn)一個(gè)兩側(cè)寬度固定晤揣，中間寬度自適應(yīng)的三欄布局瘤睹。
圣杯布局來(lái)源于文章In Search of the Holy Grail，而雙飛翼布局來(lái)源于淘寶UED捆蜀。雖然兩者的實(shí)現(xiàn)方法略有差異疮丛，不過(guò)都遵循了以下要點(diǎn)：
- 兩側(cè)寬度固定幔嫂，中間寬度自適應(yīng)
- 中間部分在DOM結(jié)構(gòu)上優(yōu)先，以便先行渲染
- 允許三列中的任意一列成為最高列
- 只需要使用一個(gè)額外的
<div>標(biāo)簽
下面我將依次介紹圣杯布局和雙飛翼布局的實(shí)現(xiàn)方法誊薄，并在最后根據(jù)個(gè)人思考對(duì)原有方法做出一些修改履恩，給出其它一些可行的方案。
圣杯布局
1. DOM結(jié)構(gòu)
<div id="header"></div>
<div id="container">
<div id="center" class="column"></div>
<div id="left" class="column"></div>
<div id="right" class="column"></div>
</div>
<div id="footer"></div>
首先定義出整個(gè)布局的DOM結(jié)構(gòu)暇屋，主體部分是由container包裹的center,left,right三列似袁，其中center定義在最前面洞辣。
2. CSS代碼
假設(shè)左側(cè)的固定寬度為200px咐刨，右側(cè)的固定寬度為150px，則首先在container上設(shè)置：
#container {
padding-left: 200px;
padding-right: 150px;
}
為左右兩列預(yù)留出相應(yīng)的空間扬霜，得到如下示意圖：
隨后分別為三列設(shè)置寬度與浮動(dòng)定鸟，同時(shí)對(duì)footer設(shè)置清除浮動(dòng)：
#container .column {
float: left;
}
#center {
width: 100%;
}
#left {
width: 200px;
}
#right {
width: 150px;
}
#footer {
clear: both;
}
得到如下效果：
根據(jù)浮動(dòng)的特性，由于center的寬度為100%著瓶，即占據(jù)了第一行的所有空間联予，所以left和right被“擠”到了第二行。
接下來(lái)的工作是將left放置到之前預(yù)留出的位置上材原，這里使用負(fù)外邊距（nagetive margin）：
#left {
width: 200px;
margin-left: -100%;
}
得到：
隨后還需要使用定位(position)方法：
#left {
width: 200px;
margin-left: -100%;
position: relative;
right: 200px;
}
這里使用position: relative和right: 200px將left的位置在原有位置基礎(chǔ)上左移200px沸久，以完成left的放置：
接下來(lái)放置right，只需添加一條聲明即可：
#right {
width: 150px;
margin-right: -150px;
}
得到最終的效果圖：
至此余蟹，布局效果完成卷胯。不過(guò)還需要考慮最后一步，那就是頁(yè)面的最小寬度：要想保證該布局效果正常顯示威酒，由于兩側(cè)都具有固定的寬度窑睁，所以需要給定頁(yè)面一個(gè)最小的寬度，但這并不只是簡(jiǎn)單的200+150=350px葵孤〉Ｅィ回想之前left使用了position: relative，所以就意味著在center開(kāi)始的區(qū)域尤仍，還存在著一個(gè)left的寬度箫津。所以頁(yè)面的最小寬度應(yīng)該設(shè)置為200+150+200=550px：
body {
min-width: 550px;
}
綜上所述，圣杯布局的CSS代碼為：
body {
min-width: 550px;
}
#container {
padding-left: 200px;
padding-right: 150px;
}
#container .column {
float: left;
}
#center {
width: 100%;
}
#left {
width: 200px;
margin-left: -100%;
position: relative;
right: 200px;
}
#right {
width: 150px;
margin-right: -150px;
}
#footer {
clear: both;
}
關(guān)于圣杯布局的示例宰啦，可參考：圣杯布局
最后提醒一下很多朋友可能會(huì)忽略的小細(xì)節(jié)：在#center中苏遥，包含了一條聲明width: 100%，這是中間欄能夠做到自適應(yīng)的關(guān)鍵绑莺∨郏可能會(huì)有朋友認(rèn)為不需要設(shè)置這條聲明，因?yàn)橛X(jué)得center在不設(shè)置寬度的情況下會(huì)默認(rèn)將寬度設(shè)置為父元素(container)的100%寬度纺裁。但需要注意到诫肠，center是浮動(dòng)元素司澎，由于浮動(dòng)具有包裹性，在不顯式設(shè)置寬度的情況下會(huì)自動(dòng)“收縮”到內(nèi)容的尺寸大小栋豫。如果去掉width: 100%挤安，則當(dāng)中間欄不包含或者包含較少內(nèi)容時(shí)，整個(gè)布局會(huì)“崩掉”丧鸯，而達(dá)不到這樣的效果：
雙飛翼布局
1. DOM結(jié)構(gòu)
<body>
<div id="header"></div>
<div id="container" class="column">
<div id="center"></div>
</div>
<div id="left" class="column"></div>
<div id="right" class="column"></div>
<div id="footer"></div>
<body>
雙飛翼布局的DOM結(jié)構(gòu)與圣杯布局的區(qū)別是用container僅包裹住center蛤铜，另外將.column類從center移至container上。
2. CSS代碼
按照與圣杯布局相同的思路丛肢，首先設(shè)置各列的寬度與浮動(dòng)围肥，并且為左右兩列預(yù)留出空間，以及為footer設(shè)置浮動(dòng)清除：
#container {
width: 100%;
}
.column {
float: left;
}
#center {
margin-left: 200px;
margin-right: 150px;
}
#left {
width: 200px;
}
#right {
width: 150px;
}
#footer {
clear: both;
}
得到如下效果示意圖：
以上代碼將container,left,right設(shè)置為float: left蜂怎，而在container內(nèi)部穆刻，center由于沒(méi)有設(shè)置浮動(dòng)，所以其寬度默認(rèn)為container的100%寬度杠步，通過(guò)對(duì)其設(shè)置margin-left和margin-right為左右兩列預(yù)留出了空間氢伟。
將left放置到預(yù)留位置：
#left {
width: 200px;
margin-left: -100%;
}
得到：
將right放置到預(yù)留位置：
#right {
width: 150px;
margin-left: -150px;
}
得到最終效果：
最后計(jì)算最小頁(yè)面寬度：由于雙飛翼布局沒(méi)有用到position:relative進(jìn)行定位，所以最小頁(yè)面寬度應(yīng)該為200+150=350px幽歼。但是當(dāng)頁(yè)面寬度縮小到350px附近時(shí)朵锣，會(huì)擠占中間欄的寬度，使得其內(nèi)容被右側(cè)欄覆蓋甸私，如下所示：
因此在設(shè)置最小頁(yè)面寬度時(shí)诚些，應(yīng)該適當(dāng)增加一些寬度以供中間欄使用（假設(shè)為150px），則有：
body {
min-width: 500px;
}
至此雙飛翼布局大功告成颠蕴！其布局整體代碼為：
body {
min-width: 500px;
}
#container {
width: 100%;
}
.column {
float: left;
}
#center {
margin-left: 200px;
margin-right: 150px;
}
#left {
width: 200px;
margin-left: -100%;
}
#right {
width: 150px;
margin-left: -150px;
}
#footer {
clear: both;
}
關(guān)于雙飛翼布局的示例泣刹，可參考：雙飛翼布局
總結(jié)與思考
通過(guò)對(duì)圣杯布局和雙飛翼布局的介紹可以看出，圣杯布局在DOM結(jié)構(gòu)上顯得更加直觀和自然犀被，且在日常開(kāi)發(fā)過(guò)程中椅您，更容易形成這樣的DOM結(jié)構(gòu)（通常<aside>和<article>/<section>一起被嵌套在<main>中）；而雙飛翼布局在實(shí)現(xiàn)上由于不需要使用定位寡键，所以更加簡(jiǎn)潔掀泳，且允許的頁(yè)面最小寬度通常比圣杯布局更小。
其實(shí)通過(guò)思考不難發(fā)現(xiàn)西轩，兩者在代碼實(shí)現(xiàn)上都額外引入了一個(gè)<div>標(biāo)簽员舵，其目的都是為了既能保證中間欄產(chǎn)生浮動(dòng)（浮動(dòng)后還必須顯式設(shè)置寬度），又能限制自身寬度為兩側(cè)欄留出空間藕畔。
從這個(gè)角度出發(fā)马僻，如果去掉額外添加的<div>標(biāo)簽，能否完成相同的布局呢注服？答案是肯定的韭邓，不過(guò)這需要在兼容性上做出犧牲：
DOM結(jié)構(gòu)
<div id="header"></div>
<div id="center" class="column"></div>
<div id="left" class="column"></div>
<div id="right" class="column"></div>
<div id="footer"></div>
去掉額外的<div>標(biāo)簽后措近，得到的DOM結(jié)構(gòu)如上所示，基于雙飛翼布局的實(shí)現(xiàn)思路女淑，只需要在center上做出修改：
1. 使用calc()
.column {
float: left;
}
#center {
margin-left: 200px;
margin-right: 150px;
width: calc(100% - 350px);
}
通過(guò)calc()可以十分方便地計(jì)算出center應(yīng)該占據(jù)的自適應(yīng)寬度瞭郑，目前calc()支持到IE9。
2. 使用border-box
.column {
float: left;
}
#center {
padding-left: 200px;
padding-right: 150px;
box-sizing: border-box;
width: 100%;
}
使用border-box可以將center的整個(gè)盒模型寬度設(shè)置為父元素的100%寬度鸭你，此時(shí)再利用padding-left和padding-right可以自動(dòng)得到中間欄的自適應(yīng)寬度屈张。不過(guò)需要注意的是，由于padding是盒子的一部分袱巨，所以padding部分會(huì)具有中間欄的背景色阁谆，當(dāng)中間欄高于側(cè)欄時(shí)，會(huì)出現(xiàn)這樣的情況：
目前box-sizing支持到IE8瓣窄。
3. 使用flex
這里使用flex還是需要與圣杯布局相同的DOM結(jié)構(gòu)笛厦，不過(guò)在實(shí)現(xiàn)上將更加簡(jiǎn)單：
<!-- DOM結(jié)構(gòu) -->
<div id="container">
<div id="center"></div>
<div id="left"></div>
<div id="right"></div>
</div>
CSS代碼如下：
#container {
display: flex;
}
#center {
flex: 1;
}
#left {
flex: 0 0 200px;
order: -1;
}
#right {
flex: 0 0 150px;
}
結(jié)語(yǔ)
以上就是本人在學(xué)習(xí)圣杯布局和雙飛翼布局過(guò)程中的一些總結(jié)和認(rèn)識(shí)纳鼎，作為初學(xué)前端的小白難免會(huì)有理解不到位的地方俺夕。文章如有錯(cuò)誤，歡迎大家多多指教~
