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