圣杯&雙飛翼

github源碼地址

作用:兩者均為三欄布局的優(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,將 leftright 部分「安裝」到 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)源:掘金 聊聊為什么淘寶要提出「雙飛翼」布局

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末铆农,一起剝皮案震驚了整個(gè)濱河市牺氨,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌墩剖,老刑警劉巖波闹,帶你破解...
    沈念sama閱讀 221,331評(píng)論 6 515
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異涛碑,居然都是意外死亡精堕,警方通過(guò)查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,372評(píng)論 3 398
  • 文/潘曉璐 我一進(jìn)店門(mén)蒲障,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)歹篓,“玉大人,你說(shuō)我怎么就攤上這事揉阎∽椋” “怎么了?”我有些...
    開(kāi)封第一講書(shū)人閱讀 167,755評(píng)論 0 360
  • 文/不壞的土叔 我叫張陵毙籽,是天一觀的道長(zhǎng)洞斯。 經(jīng)常有香客問(wèn)我,道長(zhǎng)坑赡,這世上最難降的妖魔是什么烙如? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 59,528評(píng)論 1 296
  • 正文 為了忘掉前任,我火速辦了婚禮毅否,結(jié)果婚禮上亚铁,老公的妹妹穿的比我還像新娘。我一直安慰自己螟加,他們只是感情好徘溢,可當(dāng)我...
    茶點(diǎn)故事閱讀 68,526評(píng)論 6 397
  • 文/花漫 我一把揭開(kāi)白布。 她就那樣靜靜地躺著捆探,像睡著了一般然爆。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上黍图,一...
    開(kāi)封第一講書(shū)人閱讀 52,166評(píng)論 1 308
  • 那天曾雕,我揣著相機(jī)與錄音,去河邊找鬼雌隅。 笑死翻默,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的恰起。 我是一名探鬼主播修械,決...
    沈念sama閱讀 40,768評(píng)論 3 421
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼检盼!你這毒婦竟也來(lái)了肯污?” 一聲冷哼從身側(cè)響起,我...
    開(kāi)封第一講書(shū)人閱讀 39,664評(píng)論 0 276
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤吨枉,失蹤者是張志新(化名)和其女友劉穎蹦渣,沒(méi)想到半個(gè)月后,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體貌亭,經(jīng)...
    沈念sama閱讀 46,205評(píng)論 1 319
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡柬唯,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,290評(píng)論 3 340
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了圃庭。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片锄奢。...
    茶點(diǎn)故事閱讀 40,435評(píng)論 1 352
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖剧腻,靈堂內(nèi)的尸體忽然破棺而出拘央,到底是詐尸還是另有隱情,我是刑警寧澤书在,帶...
    沈念sama閱讀 36,126評(píng)論 5 349
  • 正文 年R本政府宣布灰伟,位于F島的核電站,受9級(jí)特大地震影響儒旬,放射性物質(zhì)發(fā)生泄漏栏账。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,804評(píng)論 3 333
  • 文/蒙蒙 一栈源、第九天 我趴在偏房一處隱蔽的房頂上張望发笔。 院中可真熱鬧,春花似錦凉翻、人聲如沸了讨。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 32,276評(píng)論 0 23
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)前计。三九已至,卻和暖如春垃杖,著一層夾襖步出監(jiān)牢的瞬間男杈,已是汗流浹背。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 33,393評(píng)論 1 272
  • 我被黑心中介騙來(lái)泰國(guó)打工调俘, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留伶棒,地道東北人旺垒。 一個(gè)月前我還...
    沈念sama閱讀 48,818評(píng)論 3 376
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像肤无,于是被迫代替她去往敵國(guó)和親先蒋。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,442評(píng)論 2 359

推薦閱讀更多精彩內(nèi)容