稍微了解前端的人都知道铺纽，圣杯布局和雙飛翼布局是前端面試時必問的問題趟咆，因?yàn)樗饶荏w現(xiàn)你懂HTML結(jié)構(gòu)又能體現(xiàn)出你對ＤIV+CSS布局的掌握呵扛，畢竟我們學(xué)習(xí)CSS主要就是為了更好地布局帶來最好的用戶體驗(yàn)嘛~
事實(shí)上电湘，圣杯布局其實(shí)和雙飛翼布局是一回事隔节。它們實(shí)現(xiàn)的都是三欄布局，兩邊的盒子寬度固定寂呛，中間盒子自適應(yīng)怎诫，也就是我們常說的固比固布局。它們實(shí)現(xiàn)的效果是一樣的贷痪，差別在于其實(shí)現(xiàn)的思想幻妓。
圣杯布局的出現(xiàn)是來自于a list part上的一篇文章In Search of the Holy Grail。比起雙飛翼布局劫拢，它的起源不是源于對頁面的形象表達(dá)肉津。在西方，圣杯是表達(dá)“渴求之物”的意思舱沧。而雙飛翼布局則是源于淘寶的UED妹沙，可以說是靈感來自于頁面渲染。一起來看看淘寶的頭部實(shí)現(xiàn)：
通過縮放頁面就可以發(fā)現(xiàn)熟吏，隨著頁面的寬度的變化距糖，這三欄布局是中間盒子優(yōu)先渲染，兩邊的盒子框子固定不變牵寺，即使頁面寬度變小悍引，也不影響我們的瀏覽。
注意：當(dāng)你縮放頁面的時候帽氓，寬度不能小于700PX吗铐，為了安全起見，最好還是給body加一個最小寬度!如果你有了那么一點(diǎn)理解以后杏节，我們來看看圣杯布局的實(shí)現(xiàn)：
第一步：給出HTML結(jié)構(gòu)：
<header><h4>Header內(nèi)容區(qū)</h4></header>
<div class="container">
<div class="middle"><h4>中間彈性區(qū)</h4></div>
<div class="left"><h4>左邊欄</h4></div>
<div class="right"><h4>右邊欄</h4></div>
</div>
<footer><h4>Footer內(nèi)容區(qū)</h4></footer>
寫結(jié)構(gòu)的時候要注意唬渗，父元素的的三欄務(wù)必先寫中間盒子。因?yàn)橹虚g盒子是要被優(yōu)先渲染嘛~并且設(shè)置其自適應(yīng)奋渔，也就是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;}
第三步：看此時的效果圖
大家可以看到，三欄并沒有在父元素的一行顯示嫉鲸，就是因?yàn)橹虚g盒子我們給了百分之百的寬度市咽。所有左右兩個盒子才會被擠下來澡刹。
那么如何讓它們呈現(xiàn)出一行三列的效果呢密强？那就要讓左邊的盒子要到中間盒子的最左邊酸员，右邊的盒子到中間盒子的最右邊。換個想法蛀恩，如果中間盒子不是100%的寬度，那么按照文檔流，左邊的盒子一定會在中間盒子的后面顯示拓萌，接著顯示右邊的盒子。但是現(xiàn)在中間盒子是滿屏了的升略，所以左右兩個盒子被擠到下一行顯示微王。我們要做到的是讓左右兩個盒子都上去。此時品嚣，CSS的負(fù)邊距(negative margin)該上陣了炕倘。
第四步：利用負(fù)邊距布局
1.讓左邊的盒子上去
需要設(shè)置其左邊距為負(fù)的中間盒子的寬度，也就是.left {margin-left:-100%;}翰撑。這樣左盒子才可以往最左邊移動罩旋。
2.讓右邊的盒子上去
需要設(shè)置其左邊距為負(fù)的自己的寬度，也就是.right {margin-left：-200px;}眶诈。這樣右盒子才可以在一行的最右邊顯示出自己瘸恼。
第五步：看此時的效果圖
到這里，是不是感覺很有成就感册养？但是很遺憾的告訴你东帅，還沒結(jié)束哦！
我們現(xiàn)在的確是硬性的實(shí)現(xiàn)了固比固布局球拦。但是要記住靠闭，中間盒子是自適應(yīng)的寬度，所以中間盒子里的內(nèi)容會被左右盒子給壓住一部分坎炼。
比如現(xiàn)在我給中間盒子加很多的內(nèi)容愧膀，大家看看效果圖：
所以，我們的工作還沒停止谣光。
第六步：讓中間自適應(yīng)的盒子安全顯示
首先:利用父級元素設(shè)置左右內(nèi)邊距的值檩淋，把父級的三個子盒子往中間擠。
代碼如下：.container{ padding: 0 200px;} 這里的200px是左右盒子的寬度萄金。
效果如下：
我們可以看到蟀悦，左右兩邊的內(nèi)邊距是有了，但是中間盒子上的內(nèi)容還是被壓著氧敢。
其次:給左右兩個盒子加一個定位日戈，加了定位之后左右兩個盒子就可以設(shè)置left和right值。
代碼如下：
.left{ position: relative; left: -200px;}
.right{position: relative;right: -210px;
第七步：看最終效果圖
現(xiàn)在浙炼，圣杯布局終于搞定了份氧，也實(shí)現(xiàn)了我們要的效果，左右側(cè)的盒子固定弯屈，中間盒子自適應(yīng)蜗帜，而且中間盒子的內(nèi)容完全不受影響。你是不是也懂了呢?
真心希望對你有幫助资厉。
