聖盃佈局與雙飛翼佈局

　　聖盃佈局和雙飛翼佈局是前端工程師須要平常掌握的重要佈局方式。二者的功能相同，都是爲了實現一個兩側寬度固定，中間寬度自適應的三欄佈局。

　　主要運用了浮動，定位，負邊距。

　　註釋：圖片來源聖盃佈局原文In Search of the Holy Grail，雙飛翼佈局圖片來源來源於淘寶UED。

 

 

 

聖盃佈局

　DOM結構

              

　聖盃佈局的DOM結構主要由main包裹的center，left，right構成，其中center寫在最前面，爲了能最早渲染。

　CSS樣式

                     

　　在定義樣式的時候先爲body設置最小寬度，由於兩側存在固定寬度。

　　 這裏的main由於沒有設置寬度因此繼承父元素的寬度，爲兩邊設置內邊距給left和right騰出空間。

 　　效果以下：

　　　　　　　　

 

　　main，center，left，right代碼以下：

　　　    

　　爲三欄佈局都設置浮動，由於center寬度沾滿父元素的100%，因此left和right會被擠到下一行

　　　 效果以下：

 　　接下來就是如何讓left，right分別佔據左右兩邊了

　　 先設置left：

#left {
width: 200px;
margin-left: -100%;
}

 

　　效果以下：

　　　　　　

　　這裏咱們運用了負邊距，而後我講一下負邊距帶來的影響

　　1.margin負值對自身的影響

　　　當元素不存在width屬性或者（width：auto）的時候，負margin會增長元素的寬度

　　　注意：
　　　margin-top爲負值不會增長高度，只會產生向上位移
　　　margin-bottom爲負值不會產生位移，會減小自身的高度

　　2.對文檔流的影響

　　　元素若是用了margin-left:-20px;毋庸置疑的自身會向左偏移20px和定位（position：relative）有點不同的是，在其後面的元素會補位，也就是後面的行內

　　　元素會緊貼在此元素的以後。總結，不脫離文檔流不使用float的話，負margin元素是不會破壞頁面的文檔流。

　　3.對浮動元素的影響

　　　負margin會改變浮動元素的顯示位置，即便個人元素寫在DOM的後面，我也能讓它顯示在最前面。聖盃佈局、雙飛翼佈局都是利用了這一原理。

　　　　接着給left設置相對定位。

　　代碼以下：

#left {
width: 200px;
margin-left: -100%;
position: relative;
right: 200px; 
background-color: gray;
}

　　效果以下：

　　　　　　　　　　

　　最後設置right：

　　right的設置，只需添加一條聲明就好

#right {
width: 150px;
margin-right: -150px;
background-color: green;
}

　　最後爲footer清除浮動  clear：both；

　　　　效果以下：

 

 

 

雙飛翼佈局

 

　　聖盃佈局已經很是完美，聖盃佈局使用了相對定位，之後佈局是有侷限性的，並且寬度控制要改的地方也多，那麼有沒其餘方法更加簡潔方便呢？在淘寶UED探討下，增長多一個p就能夠不用相對佈局了，只用到了浮動和負邊距，這就是咱們所說的雙飛翼佈局。

　　雙飛翼佈局相比聖盃佈局，在center元素的外面加了一層main，而且一樣須要保證main元素必須放在最前面。

　　　　

　　　　 DOM結構

 

　　　　　　

　　　　

　　　　 CSS代碼

　　與聖盃佈局相比，雙飛翼佈局沒有使用定位。

　          　　

　　由於這是center是嵌套在main裏面的因此在給left和right預留位置的時候使用margin，雙飛翼佈局代碼和聖盃佈局相相似，left和right的設置一樣經過負邊距。

　　　　　　最後結果以下：

　　　　　　　　

 

　　 結語

　　　以上是本人在學習聖盃佈局和雙飛翼佈局時的心得和我的理解，做爲一個前端初學者而言，不免有理解不到位之處，但願你們提出，我必定加以改正。

 

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　           歡迎打賞