嫩草影院久久99_老司机午夜网站国内精品久久久久久久久_久久夜色精品国产_国产一级做a爰片久久毛片

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

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

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

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

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

: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 實(shí)現(xiàn)對應(yīng)的四個(gè)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 實(shí)現(xiàn)對應(yīng)的五個(gè)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é)會(huì)兩個(gè)布局的注意點(diǎn)

圣杯布局

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

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

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

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

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

雙飛翼布局

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

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

五、兩個(gè)布局的對比的優(yōu)缺點(diǎn)

布局優(yōu)點(diǎn) 缺點(diǎn)

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

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

代碼下載地址

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