国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專(zhuān)欄INFORMATION COLUMN

CSS布局基礎(chǔ)——（三欄布局）

enda / 1969人閱讀

摘要：三欄布局浮動(dòng)定位頭部左邊欄右邊欄中間欄底部三欄布局浮動(dòng)定位浮動(dòng)布局效果缺點(diǎn)浮動(dòng)元素會(huì)脫離文檔流，如果在的內(nèi)部還有其他元素，有可能會(huì)因?yàn)楦冈氐母叨人荻鴮?dǎo)致問(wèn)題。

前言

大家總是聽(tīng)到雙飛翼布局和圣杯布局...也不知道是誰(shuí)取的名字，我就叫三欄布局吧。雖然他們有些細(xì)微的區(qū)別，但本質(zhì)上都是實(shí)現(xiàn)一個(gè)三欄布局，即左右兩欄固定，中間自適應(yīng)。

實(shí)現(xiàn)方案

網(wǎng)上隨便一搜，全是實(shí)現(xiàn)方案，少到兩三種，多到七八種。各種方法都有優(yōu)缺點(diǎn)，但我覺(jué)得比較實(shí)用的方法主要就那三四種，因?yàn)楹芏喾椒ㄆ鋵?shí)是被淘汰的或者說(shuō)太麻煩（如表格布局）。

浮動(dòng)方案

絕對(duì)定位方案

flex布局方案

網(wǎng)格布局（本章不講）

方案一：浮動(dòng)方案

實(shí)現(xiàn)思路：
先將左右兩欄進(jìn)行浮動(dòng)，左邊欄向左浮動(dòng)，右邊欄向右浮動(dòng)就能固定在兩邊。但是要注意一點(diǎn)，這種方法要將中間欄放在最后，因?yàn)槿绻麑⒅虚g欄放在中間，并且沒(méi)有對(duì)自身進(jìn)行浮動(dòng)的話，會(huì)占據(jù)文檔中的位置，導(dǎo)致右邊欄并不能完全和左邊欄平齊。

HTML：

    
    

        
頭部

        

            
左邊欄

            
右邊欄

            
中間欄

        

        
底部

SCSS:

//浮動(dòng)布局
.layout {
    color:white;
    text-align: center;
    height: 100%;
    overflow: hidden;
    header,footer{
        width: 100%;
        height: 70px;
        background: rgb(202,132,2);
    }
    footer {
        position: absolute;
        bottom: 0;
    }
    main {
        width: 100%;
        height: 100%;
        background: red;
        .left,.right {
            width: 300px;
            height: 100%;
            background: rgb(14, 214, 171);
        }
        .left {
            float:left;
        }
        .right{
            float:right;
        }
        .center {
            height:100%;
            background: rgb(26, 26, 122);
        }
    }
    
}

效果：

缺點(diǎn)：
浮動(dòng)元素會(huì)脫離文檔流，如果在

的內(nèi)部還有其他元素，有可能會(huì)因?yàn)楦冈氐母叨人荻鴮?dǎo)致問(wèn)題。所以要么給父元素設(shè)置高度，要么就要清除浮動(dòng)了。

方案二：絕對(duì)定位方案

實(shí)現(xiàn)思路：
將左右兩欄進(jìn)行絕對(duì)定位，固定在左右兩邊，中間欄通過(guò)左右margin距離來(lái)適應(yīng)寬度。同樣，這種方法要注意中間欄在HTML結(jié)構(gòu)中的位置，如果中間欄在中間，那么中間欄也要進(jìn)行絕對(duì)定位，如果在最后面則不需要進(jìn)行絕對(duì)定位。

HTML：

    
    

        
絕對(duì)定位方案

        

            
左邊欄

            
右邊欄

            
中間欄

        

        
底部

SCSS：

// 絕對(duì)定位布局
.layout {
    color:white;
    text-align: center;
    height: 100%;
    overflow: hidden;
    header,footer{
        width: 100%;
        height: 60px;
        background: rgb(202,132,2);
    }
    footer {
        position: absolute;
        bottom: 0;
    }
    main {
        width: 100%;
        height: 100%;
        background: red;
        position: relative;
        .left,.right{
            position: absolute;
            width: 300px;
            height: 100%;
            background: rgba(100, 96, 87,0.5);
        }
        .left {
            left:0
        }
        .right {
            right:0;
            //top:0;
        }

        .center {
            height: 100%;
            margin:auto 300px;
            left:0;
            right:0;
            background: blue;
        }
    }
    
}

效果：

缺點(diǎn)：
絕對(duì)定位同樣會(huì)脫離文檔流，如果其他元素位置有要求的話，需要繼續(xù)設(shè)置定位。

方案三：Flex方案

實(shí)現(xiàn)思路：
彈性布局十分簡(jiǎn)單，給最外層的父級(jí)元素設(shè)置為彈性盒子，然后設(shè)置兩端對(duì)齊，中間欄的寬度設(shè)為100%即可。

HTML：

    
    

        
flex方案

        

            
左邊欄

            
中間欄

            
右邊欄

        

        
底部

SCSS：

//flex布局
.layout {
    color:white;
    text-align: center;
    height: 100%;
    overflow: hidden;
    header,footer{
        width: 100%;
        height: 60px;
        background: rgb(202,132,2);
        text-align: center;
    }
    footer {
        position: absolute;
        bottom: 0;
    }
    main {
        width: 100%;
        height: 100%;
        background: red;
        display:flex;
        justify-content: space-between;
        .left,.right {
            width: 300px;
            height: 100%;
            background: rgb(18, 157, 167);
        }
        .center {
            width: 100%;
            height:100%;
            background: blue;
        }
    }
}

效果：

缺點(diǎn)：
flex是CSS3才有的，瀏覽器兼容性最低到IE8。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/114572.html

相關(guān)文章

  • 三種方法實(shí)現(xiàn)CSS三欄布局

    摘要：本文由云社區(qū)發(fā)表作者前端林子本文會(huì)分別介紹三種實(shí)現(xiàn)三欄布局的方法，可在瀏覽器中打開(kāi)查看效果方法一自身浮動(dòng)的方法實(shí)現(xiàn)方法需要左欄向左浮動(dòng)，右欄向右浮動(dòng)，中間設(shè)左右來(lái)?yè)伍_(kāi)距離實(shí)現(xiàn)三欄布局中間欄不要設(shè)寬度，包括左欄左浮右欄右浮，中間不 本文由云+社區(qū)發(fā)表作者：前端林子 本文會(huì)分別介紹三種CSS實(shí)現(xiàn)三欄布局的方法，可在瀏覽器中打開(kāi)查看效果 1.方法一：自身浮動(dòng)的方法 實(shí)現(xiàn)方法：需要左欄向左浮...

    hqman 評(píng)論0 收藏0

  • 三種方法實(shí)現(xiàn)CSS三欄布局

    摘要：本文由云社區(qū)發(fā)表作者前端林子本文會(huì)分別介紹三種實(shí)現(xiàn)三欄布局的方法，可在瀏覽器中打開(kāi)查看效果方法一自身浮動(dòng)的方法實(shí)現(xiàn)方法需要左欄向左浮動(dòng)，右欄向右浮動(dòng)，中間設(shè)左右來(lái)?yè)伍_(kāi)距離實(shí)現(xiàn)三欄布局中間欄不要設(shè)寬度，包括左欄左浮右欄右浮，中間不 本文由云+社區(qū)發(fā)表作者：前端林子 本文會(huì)分別介紹三種CSS實(shí)現(xiàn)三欄布局的方法，可在瀏覽器中打開(kāi)查看效果 1.方法一：自身浮動(dòng)的方法 實(shí)現(xiàn)方法：需要左欄向左浮...

    nodejh 評(píng)論0 收藏0

  • 三種方法實(shí)現(xiàn)CSS三欄布局

    摘要：本文由云社區(qū)發(fā)表作者前端林子本文會(huì)分別介紹三種實(shí)現(xiàn)三欄布局的方法，可在瀏覽器中打開(kāi)查看效果方法一自身浮動(dòng)的方法實(shí)現(xiàn)方法需要左欄向左浮動(dòng)，右欄向右浮動(dòng)，中間設(shè)左右來(lái)?yè)伍_(kāi)距離實(shí)現(xiàn)三欄布局中間欄不要設(shè)寬度，包括左欄左浮右欄右浮，中間不 本文由云+社區(qū)發(fā)表作者：前端林子 本文會(huì)分別介紹三種CSS實(shí)現(xiàn)三欄布局的方法，可在瀏覽器中打開(kāi)查看效果 1.方法一：自身浮動(dòng)的方法 實(shí)現(xiàn)方法：需要左欄向左浮...

    wmui 評(píng)論0 收藏0

  • 三種方法實(shí)現(xiàn)CSS三欄布局

    摘要：本文由云社區(qū)發(fā)表作者前端林子本文會(huì)分別介紹三種實(shí)現(xiàn)三欄布局的方法，可在瀏覽器中打開(kāi)查看效果方法一自身浮動(dòng)的方法方法一自身浮動(dòng)的方法實(shí)現(xiàn)方法需要左欄向左浮動(dòng)，右欄向右浮動(dòng)，中間設(shè)左右來(lái)?yè)伍_(kāi)距離實(shí)現(xiàn)三欄布局中間欄不要設(shè)寬度，包括左欄 本文由云+社區(qū)發(fā)表 作者：前端林子 本文會(huì)分別介紹三種CSS實(shí)現(xiàn)三欄布局的方法，可在瀏覽器中打開(kāi)查看效果 1.方法一：自身浮動(dòng)的方法 實(shí)現(xiàn)方法：需要左欄向左浮...

    gggggggbong 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<