聖盃佈局與雙翼佈局（前端面試必看）

 

 

愛生活，不愛黑眼圈

稍微瞭解前端的人都知道，聖盃佈局和雙飛翼佈局是前端面試時必問的問題，由於它既能體現你懂HTML結構又能體現出你對ＤIV+CSS佈局的掌握，畢竟咱們學習CSS主要就是爲了更好地佈局帶來最好的用戶體驗嘛~

事實上，聖盃佈局其實和雙飛翼佈局是一回事。它們實現的都是三欄佈局，兩邊的盒子寬度固定，中間盒子自適應，也就是咱們常說的固比固佈局。它們實現的效果是同樣的，差異在於其實現的思想。

聖盃佈局的出現是來自於a list part上的一篇文章In Search of the Holy Grail。比起雙飛翼佈局，它的起源不是源於對頁面的形象表達。在西方，聖盃是表達「渴求之物」的意思。而雙飛翼佈局則是源於淘寶的UED，能夠說是靈感來自於頁面渲染。一塊兒來看看淘寶的頭部實現：

 

 

雙飛翼佈局

經過縮放頁面就能夠發現，隨着頁面的寬度的變化，這三欄佈局是中間盒子優先渲染，兩邊的盒子框子固定不變，即便頁面寬度變小，也不影響咱們的瀏覽。 注意：當你縮放頁面的時候，寬度不能小於700PX，爲了安全起見，最好仍是給body加一個最小寬度!
若是你有了那麼一點理解之後，咱們來看看聖盃佈局的實現：

 

第一步：給出HTML結構：
<header><h4>Header內容區</h4></header>
<div class="container">
<div class="middle"><h4>中間彈性區</h4></div> 
<div class="left"><h4>左邊欄</h4></div> 
<div class="right"><h4>右邊欄</h4></div>
</div>
<footer><h4>Footer內容區</h4></footer>

寫結構的時候要注意，父元素的的三欄務必先寫中間盒子。由於中間盒子是要被優先渲染嘛~而且設置其自適應，也就是width:100%。

第二步：給出每一個盒子的樣式
header{width: 100%;height: 40px;background-color: darkseagreen;}
.container{ height:200px;overflow:hidden;}
.middle{width: 100%;height: 200px; background-color: deeppink;float:left;}
.left{ width: 200px;height: 200px;background-color: blue;float:left;}
.right{width: 200px;height: 200px;background-color: darkorchid;float:left;}
footer{width: 100%; height: 30px;background-color: darkslategray;}

第三步：看此時的效果圖

 

中間的三欄並無在一行內顯示

你們能夠看到，三欄並無在父元素的一行顯示，就是由於中間盒子咱們給了百分之百的寬度。全部左右兩個盒子纔會被擠下來。
那麼如何讓它們呈現出一行三列的效果呢？那就要讓左邊的盒子要到中間盒子的最左邊，右邊的盒子到中間盒子的最右邊。換個想法，若是中間盒子不是100%的寬度，那麼按照文檔流，左邊的盒子必定會在中間盒子的後面顯示，接着顯示右邊的盒子。可是如今中間盒子是滿屏了的，因此左右兩個盒子被擠到下一行顯示。咱們要作到的是讓左右兩個盒子都上去。此時，CSS的負邊距(negative margin)該上陣了。

第四步：利用負邊距佈局

1.讓左邊的盒子上去

須要設置其左邊距爲負的中間盒子的寬度，也就是.left {margin-left:-100%;}。這樣左盒子才能夠往最左邊移動。

2.讓右邊的盒子上去

須要設置其左邊距爲負的本身的寬度，也就是.right {margin-left：-200px;}。這樣右盒子才能夠在一行的最右邊顯示出本身。

第五步：看此時的效果圖

 

實現固比固佈局

到這裏，是否是感受頗有成就感？可是很遺憾的告訴你，還沒結束哦！
咱們如今的確是硬性的實現了固比固佈局。可是要記住，中間盒子是自適應的寬度，因此中間盒子裏的內容會被左右盒子給壓住一部分。
好比如今我給中間盒子加不少的內容，你們看看效果圖：

 

中間盒子的內容被蓋住

因此，咱們的工做還沒中止。

 

第六步：讓中間自適應的盒子安全顯示

首先:利用父級元素設置左右內邊距的值，把父級的三個子盒子往中間擠。

代碼以下：.container{ padding: 0 200px;} 這裏的200px是左右盒子的寬度。
效果以下：

 

利用父級的內邊距將盒子往中間擠

咱們能夠看到，左右兩邊的內邊距是有了，可是中間盒子上的內容仍是被壓着。

 

其次:給左右兩個盒子加一個定位，加了定位以後左右兩個盒子就能夠設置left和right值。

代碼以下：
.left{ position: relative; left: -200px;}
.right{position: relative;right: -210px;

第七步：看最終效果圖

 

聖盃佈局大功告成啦！

如今，聖盃佈局終於搞定了，也實現了咱們要的效果，左右側的盒子固定，中間盒子自適應，並且中間盒子的內容徹底不受影響。你是否是也懂了呢?

雙翼佈局：

與聖盃佈局差很少，就是在main裏面放一層maininner,padding:0 200px 便可，不要在container中使用padding,同時left和right也不要position定位了