国产亚洲精品a在线观看下载,99re6热精品视频在线观看,色亚洲日韩国产综合

日本阿v片在线播放免费,成人国产片视频在线观看,日韩黄片毛片在线观看,一区亚洲电影,琪琪秋霞午夜av影视在线,中文字幕在线视频不卡,最新大伊香蕉精品视频在线,亚洲AV无码日韩一区二区乱

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

2020-2-18 seo達人

一、你能學到什么？

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

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

:root{

/ 左邊欄寬度 /

--lw:300px;

/負左邊欄寬度/

--lwf:-300px;

/ 右邊欄寬度 /

--rw:400px;

/負左邊欄寬度/

--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)對應的四個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)對應的五個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);

}

四、學會兩個布局的注意點

圣杯布局

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

中間的div.hg_main放在最上面，優(yōu)先渲染，中間div自適應，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ōu)缺點

布局優(yōu)點缺點

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

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

代碼下載地址

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