如何實現乙個聖杯布局?

2022-04-28 21:21:15 字數 2726 閱讀 7133

聖杯布局是為了討論「三欄液態布局」的實現,最早的完美實現是由 matthew levine 在 2006 年寫的一篇文章 《in search of the holy grail》 ,它主要講述了網頁中關於最佳聖杯的實現方法。

它有以下幾點要求:

接下來,將會介紹兩種實現的方法。它們的最終效果都一樣,如下圖:

先上**:

doctype html

>

<

html

lang

="zh-cn"

>

<

head

>

<

meta

charset

="utf-8"

>

<

title

>聖杯布局

title

>

<

meta

name

="description"

content

="聖杯布局測試"

/>

<

meta

name

="keywords"

content

="聖杯布局測試"

/>

head

>

<

style

type

="text/css"

>

.header, .footer

.footer

.container

.left, .middle, .right

.middle

.left

.right

style

>

<

body

>

<

div

class

="header"

>

<

h4>header

h4>

div>

<

div

class

="container"

>

<

div

class

="middle"

>

<

h4>middle

h4>

<

p>middle-content

p>

div>

<

div

class

="left"

>

<

h4>left

h4>

<

p>left-content

p>

div>

<

div

class

="right"

>

<

h4>right

h4>

<

p>right-content

p>

div>

div>

<

div

class

="footer"

>

<

h4>footer

h4>

div>

body

>

html

>

解析一下思路:

用彈性盒子來實現聖杯布局特別簡單,只需要把中間的部分用flex布局即可。

<

div

class

="header"

>

<

h4>header

h4>

div>

<

div

class

="container"

>

<

div

class

="left"

>

<

h4>left

h4>

<

p>left-content

p>

div>

<

div

class

="middle"

>

<

h4>middle

h4>

<

p>middle-content

p>

div>

<

div

class

="right"

>

<

h4>right

h4>

<

p>right-content

p>

div>

div>

<

div

class

="footer"

>

<

h4>footer

h4>

div>

.header, .footer .container .left .middle .right
解析一下思路:

總的來說,彈性布局是最適合實現聖杯布局的方法了,相較浮動,彈性布局的結構更清楚,更好理解,也不用擔心移動端的適配問題。

而浮動的方法,在面試中可能會遇到,主要考察對布局的理解能力。所以,建議大家可以把浮動的例子拷貝下來,自行模擬一把,以便加深理解。

**:

實現聖杯布局

聖杯布局特點 左右兩欄都是固定的寬度,中間欄的寬度隨著瀏覽器的變化而變化 在網頁載入過程中先載入中間主體在載入兩邊部分 效果 例項 左邊右邊 疑難點1.不要給container盒子設定寬度 因為他會繼承瀏覽器的寬度,如果設定了盒子寬度100 那麼我們在使用內邊距的時候就會出現滾動條,這個時候可以使用...

聖杯布局 浮動實現

聖杯布局是一種很常見的css布局。他要求 1 上部和下部各自占領螢幕所有寬度。2 上下部之間的部分是乙個三欄布局。3 三欄布局兩側寬度不變,中間部分自動填充整個區域。4 中間部分的高度是三欄中最高的區域的高度。浮動實現 12 3 1 填充三欄這一步驟,首先給底部區域清除浮動,防止跟隨上邊的區域一起浮...

《前端》實現聖杯布局

最近正好碰到了寫這種布局,一直沒有總結過正好借這次機會總結一波,同時加強一下自己的理解。聖杯布局和雙飛翼布局作為經典的三欄式布局是面試中的常客。兩種布局達到效果上基本相同,都是兩邊兩欄寬度固定,中間欄寬度自適應。在html結構上中間欄在最前面保證了最先渲染中間提公升效能 因為這兩種布局都比較老,我認...