這篇部落格主要是介紹一下三欄布局的聖杯布局；
聖杯布局與雙飛翼布局實際上是差不多的，他們實現的都是三欄布局，兩邊的盒子寬度固定，中間的盒子自適應；也就是我們常說的固比固布局；兩個布局方式實現的效果是一樣的，區別在於實現的思想；
在了解了什麼是三欄布局之後，我們主要來看一下聖杯模式的實現：
首先，先確定html的結構（先注意，寫結構的時候，先寫中間先渲染的盒子）
header內容區
中間彈性區
左邊欄右邊欄
footer內容區
*
header
.middle
.left
.right
.container::after
footer
1、因為中間的盒子要自適應，所以設定的寬度為100%；
2、使元素浮動float：left；使元素向左浮動；（div的display原來是block，現在是inline-block）；是為了讓元素擠在同一行；但是由於設定的是width：100%；所以後面的兩個元素被擠到下一行；
3、使用偽元素清除浮動，因為浮動元素會產生浮動流，對不同的元素有不同的影響；同樣可見文章float（浮動）模型來深入了解一下；
現在設定了此時的html和基本的css後，頁面展現的是：
此時還沒有實現三欄布局，因為左右邊欄被擠到下一行，那麼現在我們要將其拉上去；
在.right上新增屬性：margin-left：（負的自身元素的寬度，這裡就是-200px）；
此時左右邊欄被拉上去，如圖：
但是會發現乙個問題，原來中間彈性區這幾個字去哪兒了？
其實就是被左邊欄遮住了，意思就是說，這樣直接把左右邊欄拉上去，會覆蓋中間寬度為100%的中間元素；
想辦法解決：
在父容器上新增內邊距padding，這裡設定為上下為0，左右為左右便懶得寬度，即padding：0 200px；
（此時中間彈性區就被縮短；然後再對左右邊欄進行相對定位，就會把原來覆蓋的區域顯現出來了）
在.left上新增屬性定位為position：relative；然後再將其向左移動left：（父元素padding所設定的值）-200px；
在.right上新增屬性同樣定位為position：relative；然後將其向右移動right：（同上）-200px；
效果圖：
現在就解決被遮擋的問題了；變成了三欄布局；左邊欄、中間彈性區、右邊欄；
這就是所謂的聖杯布局；
聖杯布局（三欄布局）
聖杯布局也就是 左右固定寬度，中間自適應的布局樣式 html布局 注意 一定是中間部分寫在最上面 header h4 header內容 h4 header div class container div class middle h4 中間彈性 h4 div div class left h4 左邊...
三欄布局之聖杯布局 雙飛翼布局
聖杯布局和雙飛翼布局是經典的三欄布局。實現了左右兩側固定中間自適應的布局。聖杯布局主要是利用float 相對定位 容器的padding來完成布局。doctype html content type content text html charset utf 8 test page title htm...
CSS布局說 兩欄布局 三欄布局（聖杯 雙飛翼）
5.三欄布局 小知識點 內聯元素從左向右 塊級元素從上向下 各佔一行 position屬性，有6大類 這是標準盒子模型，可以看到width的長度等於content的寬度 而當將box sizing的屬性值設定成border box時，盒子模型的width border padding content...