聖杯布局和雙飛翼布局(前端面試必看)

2021-08-09 15:52:20 字數 2466 閱讀 1879

稍微了解前端的人都知道,聖杯布局和雙飛翼布局是前端面試時必問的問題,因為它既能體現你懂html結構又能體現出你對div+css布局的掌握,畢竟我們學習css主要就是為了更好地布局帶來最好的使用者體驗嘛~

事實上,聖杯布局其實和雙飛翼布局是一回事。它們實現的都是三欄布局,兩邊的盒子寬度固定,中間盒子自適應,也就是我們常說的固比固布局。它們實現的效果是一樣的,差別在於其實現的思想。

雙飛翼布局

通過縮放頁面就可以發現,隨著頁面的寬度的變化,這三欄布局是中間盒子優先渲染,兩邊的盒子框子固定不變,即使頁面寬度變小,也不影響我們的瀏覽。注意:當你縮放頁面的時候,寬度不能小於700px,為了安全起見,最好還是給body加乙個最小寬度!第一步:給出html結構:

header內容區

中間彈性區

左邊欄

右邊欄

footer內容區

寫結構的時候要注意,父元素的的三欄務必先寫中間盒子。因為中間盒子是要被優先渲染嘛~並且設定其自適應,也就是width:100%。

第二步:給出每個盒子的樣式

header

.container

.middle

.left

.right

footer

第三步:看此時的效果圖

中間的三欄並沒有在一行內顯示

大家可以看到,三欄並沒有在父元素的一行顯示,就是因為中間盒子我們給了百分之百的寬度。所有左右兩個盒子才會被擠下來。

那麼如何讓它們呈現出一行三列的效果呢?那就要讓左邊的盒子要到中間盒子的最左邊,右邊的盒子到中間盒子的最右邊。換個想法,如果中間盒子不是100%的寬度,那麼按照文件流,左邊的盒子一定會在中間盒子的後面顯示,接著顯示右邊的盒子。但是現在中間盒子是滿屏了的,所以左右兩個盒子被擠到下一行顯示。我們要做到的是讓左右兩個盒子都上去。此時,css的負邊距(negative margin)該上陣了。

第四步:利用負邊距布局

1.讓左邊的盒子上去

需要設定其左邊距為負的中間盒子的寬度,也就是.left。這樣左盒子才可以往最左邊移動。

2.讓右邊的盒子上去

需要設定其左邊距為負的自己的寬度,也就是.right。這樣右盒子才可以在一行的最右邊顯示出自己。

第五步:看此時的效果圖

實現固比固布局

到這裡,是不是感覺很有成就感?但是很遺憾的告訴你,還沒結束哦!

我們現在的確是硬性的實現了固比固布局。但是要記住,中間盒子是自適應的寬度,所以中間盒子裡的內容會被左右盒子給壓住一部分。

比如現在我給中間盒子加很多的內容,大家看看效果圖:

中間盒子的內容被蓋住

所以,我們的工作還沒停止。

第六步:讓中間自適應的盒子安全顯示

首先:利用父級元素設定左右內邊距的值,把父級的三個子盒子往中間擠。

**如下:.container這裡的200px是左右盒子的寬度。

效果如下:

利用父級的內邊距將盒子往中間擠

我們可以看到,左右兩邊的內邊距是有了,但是中間盒子上的內容還是被壓著。

其次:給左右兩個盒子加乙個定位,加了定位之後左右兩個盒子就可以設定left和right值。

**如下:

.left

.right{position: relative;right: -210px;

第七步:看最終效果圖

聖杯布局大功告成啦!

現在,聖杯布局終於搞定了,也實現了我們要的效果,左右側的盒子固定,中間盒子自適應,而且中間盒子的內容完全不受影響。你是不是也懂了呢?

聖杯布局 雙飛翼布局

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

聖杯布局和雙飛翼布局

雙飛翼布局和聖杯布局其實是我們經常會在 中看到的經典的三欄式布局,即中間是主要內容main content,然後是左邊側欄,一般是 的分類資訊,右邊欄就是一些附屬功能,最典型的例子就是 和京東。main main son left right 上面就是雙飛翼布局的html 結構非常清晰,分為main...

聖杯布局和雙飛翼布局

一 聖杯布局 重點 content的padding,left的margin left和left值,right的margin left和right值 lang en charset utf 8 聖杯布局title header content content main content left,con...