???????隨著css3的普及滥比，我們前端開發(fā)人員在繪制頁面的時候有了更省時省心省力的方式亚脆。就比如要實現(xiàn)一個左、中盲泛、右的三列布局濒持，我們有不下于五種的解決方案，flex布局寺滚、表格布局柑营、Grid布局以及今天我們要將到的圣杯布局和雙飛翼布局。

???????圣杯布局和雙飛翼布局解決的問題是相同的村视，就是兩邊頂寬官套，中間自適應(yīng)的三欄布局，中間欄要在放在文檔流前面以優(yōu)先渲染。

一奶赔、圣杯布局

1惋嚎、布局原理

???????圣杯布局中，我們主要使用到了負margin并結(jié)合relative相對定位,同時也涉及到了float脫離文檔流排版布局的相關(guān)知識站刑。為了讓中間div內(nèi)容不被遮擋另伍，將中間div設(shè)置了左右padding-left和padding-right后，將左右兩個div用相對布局position: relative并分別配合right和left屬性绞旅，以便左右兩欄div移動后不遮擋中間div摆尝。

<style>
#bd{
    padding: 0 200px 0 180px;
    height: 100px;
 }
#middle{
   float: left;
   width: 100%;
   height: 500px;
   background:blue;
}
 #left{
   float:left;
   width:180px;
   height:500px;
   margin-left:-100%;
   background: #0c9;
   position: relative;
   left: -180px;
}
 #right{
   float: left;
   width: 200px;
   height: 500px;
   margin-left: -200px;
   background: #0c9;
   position: relative;
   right: -200px;
}
</style>
<div id="bd">
    <div id="middle">middle</div>
    <div id="left">left</div>
    <div id="right">right</div>
</div>

???????注意負margin的使用，.left射者了margin-left:-100%,這里的100%是指負元素的width,因為父元素#bd的width是auto自適應(yīng)屏幕玻靡，所以.left元素就會直接向左移動到#bd元素的的最左端结榄，注意：不是屏幕的最左端，然后我們又給.left元素添加了.relative和left想對定位元素囤捻，所以.left自然就左移到屏幕的最左邊了臼朗！對于.right元素位置分析，可以采用相同的分析方法蝎土。

???????那么视哑，為什么我們要設(shè)置負margin呢？因為,.left,.middle,.right均設(shè)置了float:left,所以它們?nèi)齻€元素都會脫離文檔流誊涯，但是仍然排在同一層文檔上面挡毅，所以左右要通過負margin進行位置的移動。

???????還有一點需要注意的就是HTML代碼結(jié)構(gòu)的順序暴构，.middle一定要排在.left,.right的上面跪呈，這是整個布局邏輯的基礎(chǔ)，重要指數(shù)5顆??取逾。

2耗绿、優(yōu)缺點

???????優(yōu)點：不需要添加dom節(jié)點。

???????缺點：圣杯布局的缺點：正常情況下是沒有問題的砾隅，但是特殊情況下就會暴露此方案的弊端误阻，如果將瀏覽器無線放大時，「圣杯」將會「破碎」掉晴埂。如圖：當middle部分的寬小于left部分時就會發(fā)生布局混亂究反。（middle<left即會變形，這個您需要腦補一下儒洛，一般人也不會這么操作的）

二精耐、雙飛翼布局

???????雙飛翼布局是淘寶團隊提出來的一種布局，是圣杯布局的改進琅锻，通過給.middle添加一個子節(jié)點.inside來防止頁面被放大之后黍氮，頁面的錯亂唐含。其缺點就是多增加了一層div。

<style>
#center{
   float:left;
   width:100%;/*左欄上去到第一行*/     
   height:100px;
   background:blue;
}
#left{
  float:left;
  width:180px;
  height:100px;
  margin-left:-100%;
  background:#0c9;
}
#right{
   float:left;
   width:200px;
   height:100px;
   margin-left:-200px;
   background:#0c9;
}
/*給內(nèi)部div添加margin沫浆，把內(nèi)容放到中間欄捷枯，其實整個背景還是100%*/ 
#inside{
   margin:0 200px 0 180px;
   height:100px;
}
</style>

<div id="center">
     <div id="inside">middle</div>
</div>
<div id="left">left</div>
<div id="right">right</div>

???????雙飛翼布局理解起來比較簡單，如果你能夠理解圣杯布局专执，那么理解雙飛翼布局就完全不在話下淮捆。此處就不在進行多余的解釋，至于其優(yōu)缺點本股，前面已經(jīng)介紹過了攀痊。如果您有時間，可以使用Grid網(wǎng)格布局實現(xiàn)拄显，相關(guān)資料可以查看阮一峰老師的《Grid布局》苟径。
???????最后感謝您的閱讀。祝您學習進步躬审！