成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

CSS布局基礎——（三欄布局）

enda / 1985人閱讀

摘要：三欄布局浮動定位頭部左邊欄右邊欄中間欄底部三欄布局浮動定位浮動布局效果缺點浮動元素會脫離文檔流，如果在的內(nèi)部還有其他元素，有可能會因為父元素的高度塌陷而導致問題。

前言

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

實現(xiàn)方案

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

浮動方案

絕對定位方案

flex布局方案

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

方案一：浮動方案

實現(xiàn)思路：
先將左右兩欄進行浮動，左邊欄向左浮動，右邊欄向右浮動就能固定在兩邊。但是要注意一點，這種方法要將中間欄放在最后，因為如果將中間欄放在中間，并且沒有對自身進行浮動的話，會占據(jù)文檔中的位置，導致右邊欄并不能完全和左邊欄平齊。

HTML：

    
    

        
頭部

        

            
左邊欄

            
右邊欄

            
中間欄

        

        
底部

SCSS:

//浮動布局
.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);
        }
    }
    
}

效果：

缺點：
浮動元素會脫離文檔流，如果在

的內(nèi)部還有其他元素，有可能會因為父元素的高度塌陷而導致問題。所以要么給父元素設置高度，要么就要清除浮動了。

方案二：絕對定位方案

實現(xiàn)思路：
將左右兩欄進行絕對定位，固定在左右兩邊，中間欄通過左右margin距離來適應寬度。同樣，這種方法要注意中間欄在HTML結構中的位置，如果中間欄在中間，那么中間欄也要進行絕對定位，如果在最后面則不需要進行絕對定位。

HTML：

    
    

        
絕對定位方案

        

            
左邊欄

            
右邊欄

            
中間欄

        

        
底部

SCSS：

// 絕對定位布局
.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;
        }
    }
    
}

效果：

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

方案三：Flex方案

實現(xiàn)思路：
彈性布局十分簡單，給最外層的父級元素設置為彈性盒子，然后設置兩端對齊，中間欄的寬度設為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;
        }
    }
}

效果：

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

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

轉載請注明本文地址：http://systransis.cn/yun/114572.html

相關文章

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

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

    hqman 評論0 收藏0

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

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

    nodejh 評論0 收藏0

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

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

    wmui 評論0 收藏0

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

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

    gggggggbong 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<