雖然前天才信誓旦旦的說要寫文章,結果要寫的時候卻馬上有點偷懶了.習慣養(yǎng)成確實不太容易.
最近幾天是打算先精進點CSS后專心學習js.在網(wǎng)上學習的過程中看到大多數(shù)人提到圣杯布局和雙飛翼布局,作為一個小白,自然肯定好奇的搜索一番了.
什么是圣杯布局和雙飛翼布局?
其實他們解決的問題是一樣的,就是兩邊頂寬,中間自適應的三欄布局,中間欄要在放在文檔流前面以優(yōu)先渲染.但是只是后續(xù)思路不同而分化成兩種布局.
初期解決思路
先給出html文檔結構.
<div id="header"></div>
<div id="container">
<div id="center" class="column"></div>
<div id="left" class="column"></div>
<div id="right" class="column"></div>
</div>
<div id="footer"></div>
為了方便展示,我給各部位設置了高度以及背景色方便區(qū)分,
為了讓他們并成一列.首先給container里面的元素都加上float:left屬性.
因為中間的盒子要自適應,所以設置樣式width:100%.這時候打開瀏覽器可以看到的是中間占滿了全部寬度.左,右兩個被擠下來排在下面.為了讓左,右兩個區(qū)塊上去,左設置margin-left:-100%,右設置margin-left:-150px(這個150px是我自己設置右邊區(qū)塊的寬度).
這時候樣式看起來是這樣的
#header,
#footer {
width: 100%;
height: 40px;
background-color: darkseagreen;
text-align: center;
}
#container .column {
float: left;
}
#center {
background-color: red;
width: 100%;
height: 200px;
}
#left {
background-color: blueviolet;
width: 200px;
height: 200px;
margin-left: -100%;
}
#right {
margin-left: -150px;
height: 200px;
width: 150px;
background-color: greenyellow;
}
#footer {
clear: both;
}
這時候瀏覽器里面的顯示效果
可以看到是他們這3個div塊并列成一排了.但是問題還沒完全解決.因為現(xiàn)在中間的div塊是占據(jù)100%寬度的,而左右通過設置margin-left屬性上來了,等于中間部分的左右區(qū)域被覆蓋了.需要想辦法讓中間的往里面縮.這時候圣杯布局跟雙飛翼布局的差別就出來了.
圣杯布局的解決思路.
先通過父元素padding屬性設置內邊距,給左右讓出空間.
#container {padding: 0 150px 0 200px;}
這時候看起來是這樣的
接著利用相對布局.把左右移到正確的位置上
#left {
position: relative;
left: -200px;
background-color: blueviolet;
width: 200px;
height: 200px;
margin-left: -100%;
}
#right {
position: relative;
right: -150px;
margin-left: -150px;
height: 200px;
width: 150px;
background-color: greenyellow;
}
最終效果
雙飛翼布局
雙飛翼布局則是是通過新建的div的外邊距隔離各列
先增加一個div塊
<div id="center" class="column">
<div id="center-inner"></div>
</div>
然后把內容放進子元素里面.再用margin或者padding讓出空白位置
#center {
width: 100%;
}
#center-inner {
margin: 0 150px 0 200px;
height: 200px;
background-color: red;
}
隨感
這兩種布局都存在下面優(yōu)點:
- 允許中間重要部分先顯示.
- main部分是自適應寬度的,很容易在定寬布局和流體布局中切換.
- 任何一欄都可以是最高欄,不會出問題.
- css要求非常簡單.
但是個人認為雙飛翼布局更直觀一點.而且也十分靈活,寫的時候感覺跟Bootstrap的柵格布局有點類似.
參考
In Search of the Holy Grail
CSS布局中圣杯布局與雙飛翼布局的實現(xiàn)思路差異在哪里拯腮？
