css-前端實現左中右三欄佈局的常用方法:絕對定位，聖盃，雙飛翼，flex，table-cell,網格佈局等

丶Serendipity丶發表於2021-01-24
CSS前端Flex

 

　　1.前言

　　　　作為一個前端開發人員，工作學習中經常會遇到快速構建網頁佈局的情況，這篇我整理了一下我知道的一些方法。我也是第一次總結，包括聖盃佈局，雙飛翼佈局，table-cell佈局都是第一次聽說，可能會有需要修改的地方請諒解。三欄佈局顧名思義，就是左右兩側寬高固定，中間一列居中切隨著瀏覽器頁面變化。下面來看下具體的實現方法：

　　2.具體實現方法

　　　實現效果如下：

　　　　　　

　　　（1）絕對定位方法



　　　　<div class="box">
       　　 <div class="left">left</div>
       　　 <div class="main">main</div>
        　　<div class="right">right</div>
　　　　</div>


　　　　.box {
            border: 1px solid red;
            height: 200px;
            position: relative;
            overflow: hidden;
        }
        .main {
            background-color: springgreen;
            position: absolute;
            left: 150px;
            right: 150px;
            top: 0px;
            bottom: 0px;
        }
        .left {
            background-color: tomato;
            float: left;
            width: 100px;
            height: 200px;
        }
        .right {
            background-color: pink;
            float: right;
            width: 100px;
            height: 200px;
        }     




　　　　總結：絕對定位方法其實就是首先給父盒子設定position：relative和overflow:hidden,然後分別左右兩個盒子向兩邊設定浮動，中間的盒子使用絕對定位並設定其相對父元素左右的間隔使得把中間盒子兩邊撐開，最後設定中間盒子的top和bottom值把其高度撐開。


　　　（2）聖盃佈局


　　　　說聖盃佈局之前先來了解下什麼是聖盃佈局，首先看見這個名字，聖盃，其實就是我們飲酒的那個杯子，最主要的特點，分為上中下三個部分，這就不難想到我們平常遇到的網頁也是屬於這個結構的，頂部一般的導航欄，搜尋框了，中間一般分兩三個部分了，佔中間位置的主題內容，兩邊的小標題區域了，排行榜區域了，等等，這裡我們所說的聖盃佈局主要針對中間三部分來使用一下。這種方式使得中間盒子最先渲染出來。




    <div class="box">
        <div class="main">main</div>
        <div class="left">left</div>
        <div class="right">right</div>
    </div>
    <style>
        .box {
            border: 1px solid red;
            overflow: hidden;
            padding: 0 200px;
        }
        .main {
            width: 100%;
            height: 200px;
            position: relative;
            float: left;
            background-color: springgreen;
        }
        .left {
            background-color: tomato;
            position: relative;
            float: left;
            margin-left: -100%;
            left: -200px;
            width: 200px;
            height: 200px;
        }
        .right {
            background-color: pink;
            position: relative;
            float: left;
            margin-left: -200px;
            right: -200px;
            width: 200px;
            height: 200px;
        } 
    </style>




　　　　總結：聖盃佈局就是首先把中間盒子放在最前面，然後三欄都設定為浮動並且相對定位，給左右兩個盒子設定固定寬度，中間盒子設定100%寬度，此時父盒子寬度被中間盒子佔滿，左右兩個盒子被擠在下面，由於浮動，給左盒子margin-left:-100%使得左側盒子擠到中間盒子左側，給右邊盒子設定margin-left:-200px;使得右側盒子在中間盒子右側，這樣就實現了左中右排列，但是此時中間盒子被兩側盒子覆蓋，因此需要設定父盒子padding:0 200px;並且給左右兩個盒子分別設定left:-200px;right:-200px;（即左右兩個盒子分別偏移自身的寬度去覆蓋掉中間盒子被擠的那一部分就好了），這樣聖盃佈局就完成了。但是由於設定了父盒子的padding，當瀏覽器視窗太小會出現混亂。


　　　（3）雙飛翼佈局


　　　　由於聖盃佈局對瀏覽器最小寬度有限制，經常出現問題，於是雙飛翼佈局就出現了，專門解決這種bug，下面看下具體實現：




    <div class="box">
        <div class="wrap">
            <div class="main">main</div>
        </div>
        <div class="left">left</div>
        <div class="right">right</div>
    </div>
    <style>
        .box {
            border: 1px solid red;
            overflow: hidden;
        }
        .wrap {
            width: 100%;
            position: relative;
            float: left;
            background-color: black;
        }
        .main{
            background-color: springgreen;
            margin: 0 200px;
            overflow: hidden;
            height: 200px;
        }
        .left {
            background-color: tomato;
            position: relative;
            float: left;
            margin-left: -100%;
            width: 200px;
            height: 200px;
        }
        .right {
            background-color: pink;
            position: relative;
            float: left;
            margin-left: -200px;
            width: 200px;
            height: 200px;
        } 
    </style>




　　　　總結：聖盃佈局由於寬度小時出現混亂，雙飛翼其實就是給中間的盒子包裹一層，裡面的一層通過margin來實現了聖盃佈局的padding,具體實現過程前兩步相同，首先中間盒子在最前面，並設定了寬度100%，導致中間的盒子佔用一整行，然後通過浮動，設定左右兩邊的盒子覆蓋在中間盒子上面，從而達到了左中右三個盒子的效果，由於左右兩個盒子覆蓋在中間盒子上面，需要把真正想要的中間盒子巢狀進去一層，最終得到了雙飛翼的效果，瀏覽器無論怎麼變化沒再也不用擔心混亂問題了。這種方式也使得中間盒子最先渲染出來。


　　　（4）flex佈局


　　　　　flex佈局工作中經常用到，對我來說這個時用的最6的一種方式了，畢竟當前使用最多的佈局了吧，尤其做移動端開發的，更別說WEEX頁面預設flex佈局了，你不知道flex佈局真的需要去學習了。




    <div class="box">
        <div class="left">left</div>
        <div class="main">main</div>
        <div class="right">right</div>
    </div>
    <style>
        .box {
            border: 1px solid red;
            overflow: hidden;
            display: flex;
            justify-content: center;
        }
        .main {
            height: 200px;
            flex: 4;
            background-color: springgreen;
        }
        .left {
            background-color: tomato;
            height: 200px;
            flex: 1;
        }
        .right {
            background-color: pink;
            height: 200px;
            flex: 1;
        } 
    </style>




　　　　總結：flex佈局是一種彈性佈局，用來為盒裝模型提供最大的靈活性。具體使用請全面學習。


　　　（5）table-cell佈局


　　　　




    <div class="box">
        <div class="left">left</div>
        <div class="main">main</div>
        <div class="right">right</div>
    </div>




<style>


        .box {


            border: 1px solid red;


            overflow: hidden;


            position: relative;


        }


        .main {


            display: table-cell;


            height: 200px;


            width: 100%;


            background-color: springgreen;


        }


        .left {


            display: table-cell;


            background-color: tomato;


            height: 200px;


            min-width: 200px;


            width: 200px;


        }


        .right {


            display: table-cell;


            background-color: pink;


            height: 200px;


            min-width: 200px;


            width: 200px;


        } 


    </style>








　　　　總結：給三欄都設定表格單元display:table-cell，然後分別設定左中右三個盒子寬度，左右盒子：width:200px;中間盒子：width:100%;這時會出現左右兩側盒子被擠到兩邊，因此分別設定min-width:200px;就解決了這個問題，古納於這個佈局我接觸的比較少，今日這麼一使用果然方便，日後遇到我得試試。這種佈局方式能使得三欄的高度是統一的，但不能使center放在最前面得到最先渲染。


　　　（6）網格佈局




    <div class="box">
        <div class="left">left</div>
        <div class="main">main</div>
        <div class="right">right</div>
    </div>
    <style>
        .box {
            border: 1px solid red;
            display: grid;
            width: 100%;
            grid-template-rows: 100px;
            grid-template-columns: 200px auto 200px;
        }
        .main {
            background-color: springgreen;
        }
        .left {
            background-color: tomato;
        }
        .right {
             background-color: pink;
        } 
    </style>




　　　　總結：我驚呆了啊，這網格佈局如此強大嗎？具體實現：設定網格佈局，設定三欄高度，設定三欄寬度，中間自適應沒兩邊固定，短短几行程式碼實現了聖盃雙飛翼那麼多程式碼的效果，網格佈局如此強大，開啟官網才發現，目前還有很多相容性問題，好吧，只能先練練手了。


　　　3.結束：常見需要手寫的佈局就這些了，當然你也可以使用第三方的ui庫提供的需要佈局，但是作為一個前端開發，更注重的還是要會學習一些具體的實現邏輯，而不是隻會搬用一下API，模板之類的，希望對看到的人有些許幫助，有錯誤還請指正，謝謝啦！！如果覺得還不錯，請點下關注一起成長啦！




 






相關文章