作用:兩者均為三欄布局的優(yōu)化解決方案,并且外觀看上去一樣的效果塞淹。
為什么要是使用试吁?
常規(guī)情況下,我們的布局框架使用以下寫(xiě)法,從上到下膝昆,從左到右。大概整體頁(yè)面的架子如下所示
<header>header</header>
<section>
<aside>left</aside>
<section>main</section>
<aside>right</aside>
</section>
<footer>footer</footer>
我們希望中間 main 部分優(yōu)先顯示的話叠必,我們通過(guò)布局優(yōu)化的優(yōu)化荚孵,圣杯&雙飛翼是可以到達(dá)這樣的目的的。
因?yàn)闉g覽器渲染引擎在構(gòu)建和渲染渲染樹(shù)是異步的(誰(shuí)先構(gòu)建好誰(shuí)先顯示)纬朝,那么將<section>main</section>
部分提前即可優(yōu)先渲染处窥。
于是乎,國(guó)外的前輩就提出了「圣杯」布局玄组,目的就是通過(guò) css 的方式配合上面的 DOM 結(jié)構(gòu)滔驾,優(yōu)化 DOM 渲染。
圣杯布局
<style>
.wrapper {padding: 0 100px 0 100px; overflow:hidden;}
.col {position: relative; float: left;}
.main {width: 100%;height: 200px;}
.left {width: 100px; height: 200px; margin-left: -100%;left: -100px;}
.right {width: 100px; height: 200px; margin-left: -100px; right: -100px;}
</style>
<template>
<section class="wrapper">
<section class="col main">main</section>
<aside class="col left">left</aside>
<aside class="col right">right</aside>
</section>
</template>
使用了 relative 相對(duì)定位
俄讹、float
(需要清除浮動(dòng)哆致,此處使用 overflow:hidden;
方法)和 負(fù)值 margin
,將 left
和 right
部分「安裝」到 wrapper
的兩側(cè)患膛,顧名 「圣杯」摊阀。
但是圣杯又有一個(gè)問(wèn)題
將瀏覽器無(wú)限變窄,「圣杯」將會(huì)「破碎」掉踪蹬。當(dāng) main
部分的寬小于 left
部分時(shí)就會(huì)發(fā)生布局混亂胞此。
不過(guò)可以給瀏覽器增加一個(gè)最小寬度,不讓圣杯碎掉跃捣。PC端很多網(wǎng)站瀏覽器窗口小到一定程度的時(shí)候漱牵,底部會(huì)出現(xiàn)一個(gè)滾動(dòng)條。
于是疚漆,淘寶軟對(duì)針對(duì)「圣杯」的缺點(diǎn)做了優(yōu)化酣胀,并提出「雙飛翼」布局刁赦。
雙飛翼
<style>
.wrapper {padding: 0; overflow:hidden;}
.col {float: left;}
.main {width: 100%;}
.main-wrap {margin: 0 100px 0 100px;height: 200px;}
.left {width: 100px; height: 200px; margin-left: -100%;}
.right {width: 100px; height: 200px; margin-left: -100px;}
</style>
<template>
<section class="wrapper">
<section class="col main">
<section class="main-wrap">main</section>
</section>
<aside class="col left">left</aside>
<aside class="col right">right</aside>
</section>
</template>
同樣使用了 float
和 負(fù)值 margin
,不同的是,并沒(méi)有使用 relative 相對(duì)定位
而是增加了 dom 結(jié)構(gòu)
闻镶,增加了一個(gè)層級(jí)甚脉。確實(shí)解決了圣杯布局的缺陷。
作者:木羽不是木魚(yú)
來(lái)源:掘金 聊聊為什么淘寶要提出「雙飛翼」布局