2020-2-18 seo達人
一、你能學到什么？
①如何使用css變量 ②實現(xiàn)圣杯布局和雙飛翼的簡單思路 ③了解浮動和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 實現(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都設置浮動，左欄通過margin-left:-100%移動到和中間的div同一起點，然后通過position: relative;
left: -（左欄的寬度）；會移動到最外層div的左內(nèi)邊距的區(qū)域（中間div的左邊）
右欄可以通過margin-right:-(右欄的寬度)；移動到最外層div的右內(nèi)邊距的區(qū)域（中間div的右邊）
雙飛翼布局
在中欄的div再加一個div,設置margin-left:左欄的寬度，這樣可以省略左欄的div使用postion和left的屬性移動
最外層的div可以不用預留左欄的位置了
五、兩個布局的對比的優(yōu)缺點
布局 優(yōu)點 缺點
圣杯 無多余dom 當中間的寬度小于左右的寬度時，結構混亂
雙飛翼 可以支持各種寬度，通用性強較強 需要多加一層dom
代碼下載地址
記得一定要自己去實現(xiàn)一下