CSS之分欄佈局

時間 2019-11-17

標籤 css 分欄佈局欄目 CSS 简体版

原文原文鏈接

分欄屬於CSS佈局中的一種，現將常見的分欄方式拆出來單獨整理供本身和別人參考html

一、聖盃佈局與雙飛翼佈局

聖盃佈局和雙飛翼佈局都是實現三欄佈局的方法，左右定寬，中間自適應，是很古老的佈局方式，可是仍是常見的他們存在的影子。提出的緣由是因爲硬件不足，首先渲染（main）主體部分，其次渲染（left/right）兩邊區域，合理利用資源。前端

聖盃佈局：

所謂聖盃佈局，通俗來說就是佈局以後的三欄像一個聖盃結構，中間是聖盃主體，兩邊是把手。
聖盃佈局原理：
（1）html結構中首先是渲染main主體部分，而後在渲染left/right部分，這也是聖盃佈局和雙飛翼佈局提出的主要內容，代碼段以下：ios

<body>
    <div class="content clearfix">
        <div class="middle">main</div>
        <div class="left">left</div>
        <div class="right">right</div>
    </div>
</body>   
複製代碼

（2）設置父級元素的寬高邊距等,爲三個子元素設置浮動和相對定位；web

.content{
    display: block;
    box-sizing: border-box;
    margin: 0 auto;
    width:400px;
    height:400px;
    background: green;
    padding: 0 100px;
}
.middle,
.left,
.right {
    float: left;
    overflow: hidden;
    position: relative;
    height: 400px;
    text-align: center;
}  
複製代碼

（3）首先將main部分佔據整行，就是width設置爲100%；如今就要將left/right放到指定位置；核心操做是對margin-left賦予負值。設置left其margin-left:-100%;將此部分上移一行，此時，而且用相對定位將其固定在父級元素的padding-left區域中；一樣對於right來講，設置margin-left:-100px;便可左移100像素進入到main後面，而後用相對定位定位到padding-right中。代碼以下：bash

.middle {
    width: 100%;
    background: red;
}
.left {
    margin-left: -100%;
    width: 100px;
    background: blue;
    left: -100px;
    }
.right {
    margin-left: -100px;
    width: 100px;
    background: yellow;
    right: -100px;
    height: 400px;
    }
.clearfix:after {
    display: block;
    content: " ";
    clear: both;
    }      
複製代碼

此時，聖盃佈局已完成，結果以下圖前端性能

雙飛翼佈局

雙飛翼佈局與聖盃佈局不同的是：聖盃佈局經過父元素的padding值給left/right留出空間，經過定位將其放到留的空間內；而雙飛翼模型與此不一樣的是，經過爲main主體嵌入一個子元素設置margin: 0 100px;來給left/right留出空間，其他與聖盃佈局一致。效果與上圖是一致的。佈局

個人理解

經過設置float和設置父元素寬度100%後，left/right應該在都與main在一排，可是因爲寬度不夠，無奈被擠下來了，可是如今我只要給margin-right一個負值（這個值大小要超過自身的寬度）他就會上去，繼續被接納，可是這樣呢會覆蓋main元素，因此須要留出空間，而留空間方式有兩種，因此產生了這兩種佈局。
這兩種方式，先渲染main主體部分，優化了前端性能，可是因爲硬件的發展，我認爲這種方式提高性能已經不明顯了，還不如直接寫呢，或者flex佈局等。性能

二、flex三欄佈局

flex佈局就是彈性佈局，它是一種自適應佈局方式，根據屏幕尺寸自適應空間，閒話不說，扯代碼flex

.content {
      display: flex;
      line-height: 600px;
    }
    .left {
      width: 200px;
      height: 600px;
      background-color: lime;
      order: 0;
    }
    .middle{
      order: 1;
      width: 100%;
      background-color: purple;
    }
    .right {
      width: 200px;
      height: 600px;
      background-color: blue;
      order: 2;
    }    
複製代碼

flex三欄佈局整體思想是爲left/right設置固寬，而後讓main區域充滿其他寬度區間。上面代碼首先將父元素空間設置爲flex；而後爲left/right設置寬度，而後爲main元素width:100%;這樣便定義了三欄佈局。這個order屬性意爲在主軸方向的排列中顯示的優先級，值越小，優先級越高，因此能夠達到HTML結構中content最早渲染，卻又能讓其在中間部分顯示的效果。優化

三、兩欄佈局

兩欄佈局是最爲常見的，說一下我在實習時怎麼進行雙欄和多欄佈局的，需求是PC端主頁面是固寬，left/和right是左右的，一大一小。在雙欄佈局時，剛開始我用left區域浮動+right區域定位的方式，這樣有可能出現高度坍塌的局面。後來經過給左邊的div設置左浮動，而後right區域的div元素經過margin-left往右移動。兩欄佈局的方式不少，可自行查閱資料

四、CSS3分欄

CSS3提供一種很是方便的分欄方式。有不少屬性能夠用，不必定三欄，我在渲染課程數據時，用了這個渲染出來相似九宮格，很方便。

.content {
    width: 400px;

    column-count: 3; /*欄數*/
    column-gap: 24px;  /*欄間距*/
    column-rule: solid 0px gainsboro; /* 定義列邊框*/

    -moz-column-count: 3;
    -moz-column-gap: 24px;
    -moz-column-rule: solid 0px gainsboro;

    -webkit-column-count: 3;
    -webkit-column-gap: 24px;
    -webkit-column-rule: solid 0px gainsboro;
    }
.left {
    background-color: lime;
    height: 100px;
    }
.middle {
    background-color: purple;
    height: 100px;
    }
.right {
    background-color: blue;
    height: 100px;
    }   
複製代碼

五、多欄佈局

說一下需求頁面狀況：

這是我實習作的項目部分，不規則三欄佈局，這個項目是用Vue作的，數據是Axios獲取的。說一下個人思路，就不貼代碼了。
（1）首先經過 v-for渲染數據，而後經過判斷表達式爲子元素設置類選擇器 class="index === 0 ? 'big-item':'lit-item lit-item'+index" 用過Vue的知道index是什麼。圖片用 <el-image>餓了麼UI渲染。（2）這五個元素有一個父元素，給他相對定位，佔滿所在區域寬度，overflow: hidden;等等；（3）大小圖標用絕對定位，父相對子絕對的方式改變默認的定位left/right：0的位置，到此佈局結束。可設置細節行樣式如寬高、鼠標觸碰動畫等等。寫這個佈局不要一個一個的寫5次佈局，代碼冗餘，同樣的樣式寫一次就夠了。固然也能夠float+margin+overflow達到視覺的分列，這個是硬湊，感受很差就沒用。就到這吧，嘿嘿

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。