圣杯布局和雙飛翼布局是前端工程師需要日常掌握的重要布局方式。兩者的功能相同，都是為了實(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ò)誤，歡迎大家多多指教~
