亚洲AV无码有乱码在线观看,中文字幕人妻不在线无码视频,中文字幕婷婷丁香色五月

中文字幕无码一区二区三区在线,久久精品人人做人人爽,国产一级内射无挡观看,十八禁在线黄色网站,日韩欧美国产另类久久久精品 ,少妇人妻偷人精品一区二区,久久午夜视频,亚洲春色AⅤ无码专区

CSS簡單實現圣杯布局和雙飛翼布局

2020-2-18 seo達人

一、你能學到什么？

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

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

: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 實現對應的四個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 實現對應的五個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放在最上面，優先渲染，中間div自適應，width為100%

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

left: -（左欄的寬度）；會移動到最外層div的左內邊距的區域（中間div的左邊）

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

雙飛翼布局

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

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

五、兩個布局的對比的優缺點

布局優點缺點

圣杯無多余dom 當中間的寬度小于左右的寬度時，結構混亂

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

代碼下載地址

記得一定要自己去實現一下