聖盃佈局和雙飛翼佈局

一.雙飛翼和聖盃佈局：

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

二.其來歷：

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

三.其寫法：

經過縮放頁面就能夠發現，隨着頁面的寬度的變化，這三欄佈局是中間盒子優先渲染，兩邊的盒子框子固定不變，即便頁面寬度變小，也不影響咱們的瀏覽。

第一步：給出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>

第二步：給出每一個盒子的樣式：

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

這樣右盒子才能夠在一行的最右邊顯示出本身。

此時的效果圖：

咱們如今的確是硬性的實現了固比固佈局。

可是要記住，中間盒子是自適應的寬度，因此中間盒子裏的內容會被左右盒子給壓住一部分。

好比如今我給中間盒子加不少的內容，

你們看看效果圖：

盒子中間的字是被壓住的，因此還沒結束

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

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

padding: 0 200px;

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

.left{position: relative;left: -200px;}

.right{position: relative;right: -200px;}

 

 到此聖盃佈局就完成了，左右側的盒子固定，中間盒子自適應，並且中間盒子的內容徹底不受影響。