聖盃佈局和雙飛翼佈局

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

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

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

1、雙飛翼佈局

---

能夠看到，咱們在main裏面又加了一個內容層。若是知道盒子模型，就知道咱們是不能直接給main添加margin屬性，由於咱們已經設置了width：100%，再設置margin的話就會超過窗口的寬度，因此咱們再創造一個內容層，將全部要顯示的內容放到main-content中，給main-content設置margin就能夠了。

由於不改變父元素因此只須要給main-content設置margin: 0 200px 0 200px;屬性就能夠了達到效果

經過縮放頁面就能夠發現，隨着頁面的寬度的變化，這三欄佈局是中間盒子優先渲染，兩邊的盒子框子固定不變，即便頁面寬度變小，也不影響咱們的瀏覽。若是你有了那麼一點理解之後，咱們來看看聖盃佈局的實現：

2、雙飛翼佈局

---

第一步：給出HTML結構：

<header><h4>Header內容區</h4></header>

<div class="middle"><h4>中間彈性區</h4>

<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;

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

真心但願對你有幫助。