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

資訊專欄INFORMATION COLUMN

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

enda / 1961人閱讀

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

前言

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

實現方案

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

浮動方案

絕對定位方案

flex布局方案

網格布局（本章不講）

方案一：浮動方案

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

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);
        }
    }
    
}

效果：

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

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

方案二：絕對定位方案

實現思路：
將左右兩欄進行絕對定位，固定在左右兩邊，中間欄通過左右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;
        }
    }
    
}

效果：

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

方案三：Flex方案

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

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

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

相關文章

  • 三種方法實現CSS三欄布局

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

    hqman 評論0 收藏0

  • 三種方法實現CSS三欄布局

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

    nodejh 評論0 收藏0

  • 三種方法實現CSS三欄布局

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

    wmui 評論0 收藏0

  • 三種方法實現CSS三欄布局

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

    gggggggbong 評論0 收藏0

發表評論

0條評論

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