2020-2-18 seo達(dá)人
一、你能學(xué)到什么？
①如何使用css變量 ②實(shí)現(xiàn)圣杯布局和雙飛翼的簡(jiǎ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)對(duì)應(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)對(duì)應(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è)布局的對(duì)比的優(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)一下
藍(lán)藍(lán)設(shè)計(jì)的小編 http://tweetduck.com