聖杯布局跟雙飛翼布局

2022-08-09 12:03:11 字數 829 閱讀 4749

朋友去面試遇到了一道面試題,關於聖杯布局跟雙飛翼布局,一直孤陋寡聞,趕緊記錄一下。

顧名思義,這種布局就是左右塊固定,中間塊隨視窗變化。

聖杯布局:

<

div

class

="wrap"

>

<

div

class

="center"

>center

div>

<

div

class

="left"

>left

div>

<

div

class

="right"

>right

div>

div>

.wrap.center.left.right

雙飛翼布局:

<

div

class

="center"

>

<

div

class

="inner"

>inner

div>

div>

<

div

class

="left"

>left

div>

<

div

class

="right"

>right

div>

.center.inner.left.right

聖杯布局 雙飛翼布局

前言 上班划水偷空了解了一下聖杯布局和雙飛翼布局,一聽這兩個名字,覺得不明覺厲,其實就是三欄布局,左右兩邊的盒子寬度固定,中間的盒子寬度自適應。以下內容均是總結網際網路上別人的文章。覺得有意思就記錄一下。聖杯布局,方法一 container middle left right style head ...

布局 聖杯布局 雙飛翼布局

隨著前端技術的發展推進,web端的布局方式已基本成熟,那麼在 布局方式中,三列布局最為常用,布局方式也有很多,漸漸的開發者們開始從效率的角度優化自己的 如果三排布局能將中間的模組放在dom樹前面,那麼瀏覽器在做重繪的時候不久有限顯示了嗎?機制的開發者們開始圍繞者這個方向進行了dom的優化,於是誕生了...

聖杯 雙飛翼布局

自己雖然經歷著web應用的開發,總是拿著別人寫好的css來引用到自己的專案當中,甚至一度迷上了bootstrap,發現有了它自己可以不用在寫程式邏輯的同時還要去修改別人的css.當然開發的應用大多數是企業內部應用,個別網際網路的程式.2016偶然的機會接觸到前端這個概念,發現自己還是挺喜歡前端的這些...