成年拍拍视频,888欧美日韩国产

CSS簡單實現(xiàn)圣杯布局和雙飛翼布局

2020-2-18 seo達(dá)人

一、你能學(xué)到什么？

①如何使用css變量 ②實現(xiàn)圣杯布局和雙飛翼的簡單思路 ③了解浮動和margin的特性

css變量設(shè)置(兩個布局都有的部分)

:root{

/ 左邊欄寬度 /

--lw:300px;

/負(fù)左邊欄寬度/

--lwf:-300px;

/ 右邊欄寬度 /

--rw:400px;

/負(fù)左邊欄寬度/

--rwf:-400px;

/ 高度 /

--height:300px;

}

二、圣杯布局的html和css代碼

html部分

<div class="holyGrail">

<div class="hg_main">main</div>

<div class="hg_left">left</div>

<div class="hg_right">right</div>

</div>

css 實現(xiàn)對應(yīng)的四個class

.holyGrail {

height: var(--height);

/ 留出左右兩欄的布局為了字體不被覆蓋/

padding-left: var(--lw);

padding-right: var(--rw);

}

.hg_main{

width:100%;

float: left;

height: var(--height);

background-color: blanchedalmond;

}

.hg_left{

position: relative;

left: var(--lwf);

float: left;

margin-left: -100%;

width:var(--lw);

height: var(--height);

background-color: blueviolet;

}

.hg_right{

float: left;

margin-right: var(--rwf);

width:var(--rw);

height: var(--height);

background-color: brown;

}

三、雙飛翼布局的html和css代碼

html部分

<div class="doubleWing">

<div class="dw_main">

<div class="dw_con">main</div>

</div>

<div class="dw_left">left</div>

<div class="dw_right">right</div>

</div>

css 實現(xiàn)對應(yīng)的五個class

.doubleWing{

padding-right: var(--rw);

}

.dw_left{

float: left;

margin-left: -100%;

width:var(--lw);

height: var(--height);

background-color: blueviolet;

}

.dw_main{

width:100%;

float: left;

height: var(--height);

background-color: blanchedalmond;

}

.dw_con {

margin-left: var(--lw);

}

.dw_right{

float: left;

margin-right: var(--rwf);

width:var(--rw);

background-color: brown;

height: var(--height);

}

四、學(xué)會兩個布局的注意點

圣杯布局

在最外邊的類（holyGrail）左右要留出左欄和右欄的寬度（使用padding-left，padding-right)

中間的div.hg_main放在最上面，優(yōu)先渲染，中間div自適應(yīng)，width為100%

左中右欄的div都設(shè)置浮動，左欄通過margin-left:-100%移動到和中間的div同一起點，然后通過position: relative;

left: -（左欄的寬度）；會移動到最外層div的左內(nèi)邊距的區(qū)域（中間div的左邊）

右欄可以通過margin-right:-(右欄的寬度)；移動到最外層div的右內(nèi)邊距的區(qū)域（中間div的右邊）

雙飛翼布局

在中欄的div再加一個div,設(shè)置margin-left:左欄的寬度，這樣可以省略左欄的div使用postion和left的屬性移動

最外層的div可以不用預(yù)留左欄的位置了

五、兩個布局的對比的優(yōu)缺點

布局優(yōu)點缺點

圣杯無多余dom 當(dāng)中間的寬度小于左右的寬度時，結(jié)構(gòu)混亂

雙飛翼可以支持各種寬度，通用性強(qiáng)較強(qiáng) 需要多加一層dom

代碼下載地址

記得一定要自己去實現(xiàn)一下