稍微了解前端的人都知道，圣杯布局和雙飛翼布局是前端面試時必問的問題，因為它既能體現你懂HTML結構又能體現出你對ＤIV+CSS布局的掌握，畢竟我們學習CSS主要就是為了更好地布局帶來最好的用戶體驗嘛~
事實上，圣杯布局其實和雙飛翼布局是一回事。它們實現的都是三欄布局，兩邊的盒子寬度固定，中間盒子自適應，也就是我們常說的固比固布局。它們實現的效果是一樣的，差別在于其實現的思想。
圣杯布局的出現是來自于a list part上的一篇文章In Search of the Holy Grail。比起雙飛翼布局，它的起源不是源于對頁面的形象表達。在西方，圣杯是表達“渴求之物”的意思。而雙飛翼布局則是源于淘寶的UED，可以說是靈感來自于頁面渲染。一起來看看這兩種布局的區別在哪：
一、雙飛翼布局
可以看到，我們在main里面又加了一個內容層。如果知道盒子模型，就知道我們是不能直接給main添加margin屬性，因為我們已經設置了width：100%，再設置margin的話就會超過窗口的寬度，所以我們再創造一個內容層，將所有要顯示的內容放到main-content中，給main-content設置margin就可以了。
因為不改變父元素所以只需要給main-content設置margin: 0 200px 0 200px;屬性就可以了達到效果
通過縮放頁面就可以發現，隨著頁面的寬度的變化，這三欄布局是中間盒子優先渲染，兩邊的盒子框子固定不變，即使頁面寬度變小，也不影響我們的瀏覽。如果你有了那么一點理解以后，我們來看看圣杯布局的實現：
二、雙飛翼布局
第一步：給出HTML結構：
`Header內容區
``中間彈性區
``左邊欄
``右邊欄
````Footer內容區
`學習Q-q-u-n： 767-273-102 ，分享學習的方法和需要注意的小細節寫結構的時候要注意，父元素的的三欄務必先寫中間盒子。因為中間盒子是要被優先渲染嘛~并且設置其自適應，也就是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;`學習Q-q-u-n： 767-273-102 ，分享學習的方法和需要注意的小細節
下載)
