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

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

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

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



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

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

圣杯布局

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

中間的div.hg_main放在最上面，優(yōu)先渲染，中間div自適應(yīng)，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ù)留左欄的位置了

五、兩個布局的對比的優(yōu)缺點

布局 優(yōu)點 缺點

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

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

代碼下載地址

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


分享本文至：

日歷

鏈接

個人資料

存檔