css三欄佈局

css三欄佈局

1.聖盃佈局

聖盃概述：父盒子包含三個子盒子（左，中，右）
核心思想：
1. 父盒子設置左右的 margin（或者padding） 來爲左右盒子預留留位置；
2. 中間盒子的寬度設置爲 width: 100%，實現中間寬度自適應；
3. 使用負邊距(均是 margin-left)把左右兩邊的盒子都拉上去和中間盒子同一行；
- .left {margin-left:-100%;} 把左邊的盒子拉上去
- .right {margin-left：-右邊盒子寬度px;} 把右邊的盒子拉上去
4. 對左右盒子使用相對定位進行偏移來佔據 margin（或者padding）留出的空白，避免中間盒子的內容被左右盒子覆蓋；
5. 三個盒子均左浮動！

<!-- 聖盃的 HTML 結構 -->
<!-- 外層包裹 -->
<div class="container">
    <!-- 中間的 div 必須寫在最前面 實現優先加載-->
    <div class="middle">中間彈性區</div>
    <div class="left">左邊欄</div>
    <div class="right">右邊欄</div>
</div>

css佈局：

<style>
    .container {
        margin-left: 120px;
        margin-right: 220px;
    }

    .middle{
        float: left;
        width: 100%;
        height: 300px;
        background-color: red;
    }

    .left {
        float: left;
        width: 100px;
        height: 300px;
        margin-left: -100%;
        position: relative;
        left: -120px;
        background-color: blue;
    }

    .right {
        float: left;
        width: 200px;
        height: 300px;
        margin-left: -200px;
        position: relative;
        right: -220px;
        background-color: green;
    }
</style>

2.雙飛翼佈局

雙飛翼概述：父盒子包含三個子盒子（左，中，右），中間的子盒子裏再加一個子盒子。
核心思想：
1. 中間盒子的寬度設置爲 width: 100%, 實現寬度自適應；
2. 在中間盒子裏面再添加一個 div，然後對這個 div 設置 margin-left 和 margin-right來爲左右盒子留位置；
3. 使用負邊距(均是 margin-left)把左右兩邊的盒子都拉上去和中間盒子處在同一行；
4. 三個盒子均左浮動！

<!-- 雙飛翼的 HTML 結構 -->
    <!-- 中間的 div 必須寫在最前面 優先加載-->
    <div class="middle">
         <div class="middle-inner">中間彈性區</div>
    </div>
    <div class="left">左邊欄</div>
    <div class="right">右邊欄</div>

css佈局：

<style>
.middle {
float: left;
width: 100%;
}

.middle-inner {
height: 200px;
margin-left: 120px;
margin-right: 220px;
background-color: green;
}

.left {
float: left;
height: 200px;
width: 100px;
margin-left: -100%;
background-color: red;
}

.right {
float: left; //（右浮動也可以！）
width: 200px;
height: 200px;
margin-left: -200px;
background-color: blue;
}
</style>

聖盃和雙飛翼異同

聖盃佈局和雙飛翼佈局解決的問題是一樣的，都是兩邊定寬，中間自適應的三欄佈局，中間欄要在放在文檔流前面以優先渲染！

兩種方法基本思路都相同：
首先讓中間盒子 100% 寬度佔滿同一高度的空間。當左右兩個盒子被擠出中間盒子所在區域時，使用 margin-left 的負值將左右兩個盒子拉回與中間盒子同一高度的空間。接下來進行一些調整：避免中間盒子的內容被左右盒子遮擋。

因此其主要區別在於：如何使中間盒子的內容不被左右盒子遮擋：

聖盃佈局的方法：設置父盒子的 margin（padding） 值爲左右盒子留出空位，再利用相對定位對左右盒子調整位置佔據 padding 出來的空位；
雙飛翼佈局的方法：在中間盒子裏再增加一個子盒子，直接設置這個子盒子的 margin 值來讓出空位，而不用再調整左右盒子。
簡單說起來就是雙飛翼佈局比聖盃佈局多創建了一個 div，但不用相對定位了，少設置幾個屬性。

3.flex佈局

flex佈局概述：使用css3中的display：flex屬性進行佈局！
核心思想：
1. 利用flex特性使flex-item隨着容器大小自適應。
2. 屬性知識點：
- order：值是整數，默認爲0，整數越小，item排列越靠前。
- flex-grow：定義了當flex容器有多餘空間時，item是否放大。默認值爲0，即當有多餘空間時也不放大；可能的值爲整數，表示不同item的放大比例。
- flex-shrink：定義了當容器空間不足時，item是否縮小。默認值爲1，表示當空間不足時，item自動縮小，其可能的值爲整數，表示不同item的縮小比例。
- flex-basis：表示項目在主軸上佔據的空間，默認值爲auto。
- flex：是flex-grow、flex-shrink和flex-basis三屬性的簡寫總和。
3. 利用以上屬性，即可實現簡單三欄佈局！

參考理解flex文章：
10分鐘入門flex
阮一峯flex佈局
三分鐘看懂flex
PS:flex還有其他許多屬性，在此不一一列舉，用到時可參考上述文章查詢理解即可！

<!-- flex的 HTML 結構 -->
<div class="container">
    <div class="main"></div>
    <div class="left"></div>
    <div class="right"></div>
</div>

css佈局

<style>
    .container {
        display: flex;
    }

    .main {
        flex-grow: 1;
        height: 300px;
        background-color: red;
    }

    .left {
        order: -1;
        flex: 0 1 100px;
        margin-right: 20px;
        height: 300px;
        background-color: blue;
    }

    .right {
        flex: 0 1 200px;
        margin-left: 20px;
        height: 300px;
        background-color: green;
    }
</style>

總結：
flex是未來流行的趨勢，其功能也十分強大，可適應不同分辨率的屏幕，在移動端表現出色，但存在瀏覽器兼容問題，且不適合作爲頁面整體佈局的方法！

4.浮動佈局

浮動佈局概述：採用float屬性使實現並行三欄佈局。
核心思想：
1. 左右盒子浮動脫離文檔流，使其固定在頁面的兩側。
2. 中間盒子只給高度和margin值，不給寬度，由盒子撐開。
3. 中間盒子設定左右margin值，留出左右空白位置。

<div class="container">
    <div class="left"></div>
    <div class="right"></div>
    <div class="main">
        12321321
    </div>
</div>

css佈局

<style>
    .left {
     float: left;
     height: 200px;
     width: 100px;
     background-color: red;
    }
    .right {
     float: right;
     width: 200px;
     height: 200px;
     background-color: blue;
    }
    .main {
     margin-left: 120px;
     margin-right: 220px;
     height: 200px;
     background-color: green;
    }
</style>

總結：
這種佈局方法左右浮動固定，中間寬度自適應，代碼精簡。
缺點是：主要的內容無法優先加載，當頁面內容較多時會影響用戶體驗。

5.絕對定位佈局

絕對定位概述：在包裹容器內進行絕對定位，使三部分展示在一行！
核心思想：
1. 父級給相對定位，作爲參照。
2. 中間盒子只給高度和margin值，不給寬度，由盒子撐開。
3. 中間盒子設定margin-left和margin-right留出左右空白位置。
4. 左右盒子絕對定位參照父級定位在兩邊。

<!-- 絕對定位的 HTML 結構 -->
<div id="container">
    <div class="main"></div>
    <div class="left"></div>
    <div class="right"></div>
</div>

css佈局

<style>
    #container{
        position:relative;
    }
    .main{
        height: 300px;
        margin:0 220px 0 120px;
        background:green;
    }
    .left{
        position:absolute;
        width: 100px;
        height: 300px;
        left:0;
        top:0;
        background:red;
    }
    .right{
        position:absolute;
        width: 200px;
        height: 300px;
        top:0;
        right:0;
        background:blue;
    }
</style>

總結：這種方法比較常見，簡單粗暴。應用的面也比較廣，不僅限於三欄佈局，其他浮動不能解決，或者較麻煩的佈局，都可以採用絕對定位實現。不過此方法雖好，也不要濫用！

浮動和定位佈局異同

浮動和定位佈局均可實現左右定寬，中間自適應的三欄佈局。但浮動佈局無法優先渲染中間區域內容，數據體量大時會影響用戶體驗。

兩種方法實現思路類似：
都是讓中間盒子只設置左右margin而不設定寬，空出左右盒子位置實現寬度自適應。然後通過固定左右盒子在頁面兩側，實現三欄佈局。
因此其主要區別在於：實現左右盒子固定的方法

浮動佈局採用左右浮動實現頁面兩側固定。
定位佈局採用絕對定位實現頁面兩側固定。

6.BFC佈局

BFC佈局與浮動佈局類似，但在防止覆蓋盒子間內容上，採用的方法不同。
核心思想：
1. 左右盒子浮動固定在兩側，且通過設置margin值留出與中間盒子的空隙。
2. 中間盒子不設寬度，自適應大小。通過overflow：hidden來進行溢出隱藏。

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

css佈局

    <style>
    .left {
        float: left;
        height: 200px;
        width: 100px;
        margin-right: 20px;
        background-color: red;
    }
    .right {
        float: right;
        width: 200px;
        height: 200px;
        margin-left: 20px;
        background-color: blue;
    }   
    .main {
        height: 200px;
        overflow: hidden;
        background-color: green;
    }
    </style>

總結：
方法類似浮動佈局，缺點也是無法優先加載中間區塊！