css來實現聖杯布局

2021-10-10 21:36:13 字數 1929 閱讀 1808

聖杯布局的要求

– 縱向分為上中下三部分,上中下寬度100%,上下高度固定;中間部分高度自動。

– 中間被拆分為三欄:左右寬度固定,中間自適應;

1.flex布局

<

!doctype html>

"en"

>

"utf-8"

>

"viewport" content=

"width=device-width, initial-scale=1.0"

>

document<

/title>

<

/head>

.container

.header

.footer

.main

.left,

.right

.main .middle

<

/style>

="container"

>

="header"

>頭部<

/div>

="main"

>

="left"

>左側<

/div>

="middle"

>中間<

/div>

="right"

>右側<

/div>

<

/div>

="footer"

>尾部<

/div>

<

/div>

<

/body>

<

/html>

2.浮動

1先定義好header和footer的樣式,使之橫向撐滿。

2在container中的三列設為浮動和相對定位(後面會用到),center要放在最前面,footer清除浮動。

三列的左右兩列分別定寬200px和150px,中間部分center設定100%撐滿

3這樣因為浮動的關係,center會佔據整個container,左右兩塊區域被擠下去了

4接下來設定left的 margin-left: -100%;,讓left回到上一行最左側

5但這會把center給遮住了,所以這時給外層的container設定 padding-left: 200px;padding-right: 150px;,給left和right空出位置

6這時left並沒有在最左側,因為之前已經設定過相對定位,所以通過 left: -200px; 把left拉回最左側

7同樣的,對於right區域,設定 margin-right: -150px; 把right拉回第一行

這時右側空出了150px的空間,所以最後設定 right: -150px;把right區域拉到最右側就行了。

<

!doctype html>

"en"

>

"utf-8"

>

"viewport" content=

"width=device-width, initial-scale=1.0"

>

document<

/title>

<

/head>

*.box

.left

.right

.center

<

/style>

="box"

>

="center"

>

1<

/div>

="left"

>

2<

/div>

="right"

>

3<

/div>

<

/div>

<

/body>

<

/html>

CSS 聖杯布局實現1

什麼是聖杯布局?三欄布局,左右兩欄隨著瀏覽器縮放寬度不變,中間欄自適應 知識點 浮動 定位 padding和margin的區別 我沒有使用大部分教程的方法,但是效果相同。步驟如下 第一步.定義基本結構和樣式 中間欄左邊欄 右邊欄效果圖 因為中間main的寬度佔據了100 所以剩下的兩個div塊級元素...

CSS聖杯布局

本文與之前 css雙飛翼布局 一文有些相似,在html結構上他們可以說是相同的。樣式主要表現為浮動 負邊距 定位。在 css雙飛翼布局 中,為了排開左右兩邊遮擋main元素的區域,是給main又新增了乙個子元素,用子元素來控制main所要顯示內容的寬度與位置,這是乙個不錯的方法,但從結構上來講,我們...

CSS 布局3 聖杯布局

聖杯布局是有 的工程師提出,巧妙的利用我們介紹過的定位技術 負邊距 相對定位 浮動 組合運用。輕鬆實現常見布局。我們在前面介紹過,使用浮動特性,實現三列布局,但是使用div布局,有乙個問題,那就是內容區,在左邊區和右邊區之後渲染。下面我們使用聖杯布局的思路,實現乙個內容區渲染在前的三列布局。1 負邊...