這篇博客主要是介紹一下三欄佈局的聖盃佈局；
聖盃佈局與雙飛翼佈局實際上是差不多的，他們實現的都是三欄佈局，兩邊的盒子寬度固定，中間的盒子自適應；也就是我們常說的固比固佈局；兩個佈局方式實現的效果是一樣的，區別在於實現的思想；
在瞭解了什麼是三欄佈局之後，我們主要來看一下聖盃模式的實現：
首先，先確定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>然後利用css進行一定的修飾：
*{
margin:0;
padding:0;
}
header{
width: 100%;
height: 40px;
background-color:#666;
}
.middle{
width: 100%;
height: 200px;
background-color: #0b0;
float: left;
}
.left{
width: 200px;
height: 200px;
background-color: #e00;
float:left;
}
.right{
width: 200px;
height: 200px;
background-color: #00e;
float:left;
}
.container::after{
content: '';
display: block;
clear: both;
}
footer{
width: 100%;
height: 40px;
background-color:#666;
}上面的css解釋幾點：
1、因爲中間的盒子要自適應，所以設置的寬度爲100%；
2、使元素浮動float：left；使元素向左浮動；（div的display原來是block，現在是inline-block）；是爲了讓元素擠在同一行；但是由於設置的是width：100%；所以後面的兩個元素被擠到下一行；
3、使用僞元素清除浮動，因爲浮動元素會產生浮動流，對不同的元素有不同的影響；同樣可見文章float（浮動）模型來深入瞭解一下；
現在設置了此時的HTML和基本的css後，頁面展現的是：
此時還沒有實現三欄佈局，因爲左右邊欄被擠到下一行，那麼現在我們要將其拉上去；
我們需要：在.left上添加屬性：margin-left：（負的上一個元素的寬度，這裏的就是-100%）；
在.right上添加屬性：margin-left：（負的自身元素的寬度，這裏就是-200px）；
此時左右邊欄被拉上去，如圖：
但是會發現一個問題，原來中間彈性區這幾個字去哪兒了？
其實就是被左邊欄遮住了，意思就是說，這樣直接把左右邊欄拉上去，會覆蓋中間寬度爲100%的中間元素；
想辦法解決：
在父容器上添加內邊距padding，這裏設置爲上下爲0，左右爲左右便懶得寬度，即padding：0 200px；
（此時中間彈性區就被縮短；然後再對左右邊欄進行相對定位，就會把原來覆蓋的區域顯現出來了）
在.left上添加屬性定位爲position：relative；然後再將其向左移動left：（父元素padding所設置的值）-200px；
在.right上添加屬性同樣定位爲position：relative；然後將其向右移動right：（同上）-200px；
效果圖：
現在就解決被遮擋的問題了；變成了三欄佈局；左邊欄、中間彈性區、右邊欄；
這就是所謂的聖盃佈局；