? ? ?什么是圣杯布局？

? ? ?圣杯布局是三列布局，中間寬度自適應，兩邊定寬，這樣做的優勢是重要的東西放在文檔流前面可以優先渲染。也就是在html文檔中，中間的部分要寫在左右布局之前。

? ? ?當然，這種布局是面向PC端的，移動端由于屏幕寬度較小，不推薦多列布局。

? ? ?圣杯布局需要用到什么東西？

? ? ?（1）圣杯布局，需要用到浮動，負邊距，相對定位（相對于自身定位relative），這種方法不需要添加額外的標簽。

? ? ?（2）關于margin或者padding單位是百分比的時候，它是基于父級元素或者包含塊的寬度來進行計算的。

? ? ?探索圣杯布局

? ? ?首先我們列出一個基本的DOM結構。? ? ??

<div class="header">Header</div> <div class="bd"><div class="main">Main</div><div class="left">Left</div><div class="right">Right</div> </div> <div class="footer">Footer</div>

? ? 效果最終樣式：? ??

*{padding:0;margin:0;}.header,.footer{height:50px;width:100%;background:#666;clear:both;}.bd{padding-left:150px;padding-right:190px;}.main{width:100%;float:left;background:#D6D6D6;}.left{width:150px;background:#E79F6D;float:left;margin-left:-100%; /*相對于包含快的寬度*/position:relative;left:-150px;}.right{float:left;width:190px;background:#77BBDD;margin-left:-190px;position:relative;right:-190px;} View Code

左中右布局變化過程

?1、中間部分需要根據瀏覽器寬度的變化而變化，所以要用100%，這里設左中右向左浮動，因為中間100%，左層和右層根本沒有位置上去，被擠下去了。

.main{width:100%;float:left;background:#D6D6D6;}.left{width:150px;background:#E79F6D;float:left;}.right{float:left;width:190px;background:#77BBDD;}

到這里我們會發現，main由于是100%的寬度，所以它會把left和right兩塊給擠下去，而且由于在文檔中，main是在left和right之前渲染的，因此，它會在left和right的上面顯示。

如果我把html的順序調一下。

那么，文檔渲染的順序也會相應發生變化。

?2、把左層設置margin-left:-150px后，發現left上去了，因為負到出窗口沒位置了，只能往上挪。（如果margin-left:-100px發現還是上不去，而是左移出窗口，留下剩余的在顯示在窗口中）。

3、那么按第二步這個方法，可以得出它只要挪動窗口寬度那么寬就能到最左邊了，利用負邊距，把左右欄定位（左欄先上去，右欄再上去）。

.main{width:100%;float:left;background:#D6D6D6;}.left{width:150px;background:#E79F6D;float:left;margin-left:-100%; /*相對于包含快的寬度*/}.right{float:left;width:190px;background:#77BBDD;margin-left:-190px;}

4、然而問題來了，中間被左右擋住了啊，只好給外層加padding了。

.bd{padding-left:150px;padding-right:190px;}

5、但是加了之后左右欄也縮進來了，于是采用相對定位方法(relative相對自身定位)，各自相對于自己把自己挪出去，得到最終結果?

.left{width:150px;background:#E79F6D;float:left;margin-left:-100%; /*相對于包含快的寬度*/position:relative;left:-150px;}.right{float:left;width:190px;background:#77BBDD;margin-left:-190px;position:relative;right:-190px;}

因此，這樣就實現了，三列布局，左右固定寬度，中間隨瀏覽器寬度進行自適應。

?

??

轉載于:https://www.cnblogs.com/hl-520/p/5753075.html

總結

以上是生活随笔為你收集整理的【聊一聊】css中的经典布局——圣杯布局的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。