淺談css三欄佈局(包括雙飛翼佈局和聖盃佈局)

三欄佈局

在寫正文以前

1. ps :真想說一句，寫博客，真香！(雖然我知道根本沒人願意看)
2. ok ,不說了進入正題

三欄佈局的概念

1. 三欄佈局的概念聽起來，很簡單，就是讓三列從左到右，依次排列，左邊區域和右邊區域固定寬，而中間內容區域寬度自適應，就像下面這樣

固然要注意：咱們這裏所說的中間部分寬度自適應就是隨着屏幕大小的改變而本身適應的過程。這也是三欄佈局產生的緣由所在

三欄佈局的具體實現以及原理

第一種：浮動三欄佈局

HTML代碼

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

下面是 css 代碼部分

.werppar{
            /* 造成bfc塊級做用域上下文 ，目的爲了清除浮動*/
            overflow: hidden;
            border: 5px solid red;
        }
        .left{
            float: left;
            width: 200px;
            height: 200px;
            background-color: lawngreen;
        }
        .right{
            float: right;
            width: 200px;
            height: 200px;
            background-color: lightcoral;
        }
        .container{
            margin: 0 200px;
            height: 200px;
            background-color: rebeccapurple;
        }

1. 效果以下

1. 那麼這種方法是很簡單的，相信各位瞬間就能看懂，不過也有一些須要注意的細節:
2. 這種辦法中 dom節點中，left,right,container,這三個塊是不能換順序的，也就是說這種方法的缺點很明顯:瀏覽器是自上而下解析代碼渲染dom樹，那麼container內容區域不能被優先渲染出來
3. 至於爲何不能換順序，你們也很清楚:由於咱們要讓他們在一行內展現，那麼就必須讓左右這兩個塊漂浮起來不佔原來的位置了，才能讓container區域躋身而入，

第二種定位三欄佈局

html

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

下面是css

.werppar{
            position: relative;
        }
        .left{
            position: absolute;
            top: 0;
            left: 0;
            width: 200px;
            height: 200px;
            background-color: lawngreen;
        }
        .right{
            position: absolute;
            top: 0;
            right: 0;
            width: 200px;
            height: 200px;
            background-color: lightcoral;
        }
        .container{
            margin: 0 200px;
            height: 200px;
            background-color: rebeccapurple;
        }

1. 效果以下：

1. 看起來，與上面的效果是一摸同樣的，方法也相對來講比較簡單，實現原理也和前面的浮動差很少，不過它的盒子高度是靠 container 去撐開的，而它的有點就是 container 此次是能夠被優先渲染出來了，由於它排在第一位
2. 惟一的缺點就是這種方法沒法實現等高佈局

第三種：用bfc原理作三欄佈局

1. bfc特性有一點是觸發了bfc的盒子不會和浮動的盒子發生重疊，也就是說觸發bfc的盒子不會被浮動的盒子蓋住，那麼問題就解決一半了。來看一下具體實現
   HTML

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

下面是css代碼

.werppar{
           width: 100%;
        }
        .left{
            float: left;
            width: 200px;
            height: 200px;
            background-color: gold;
        }
        .right{
           float: right;
            width: 200px;
            height: 200px;
            background-color: greenyellow;
        }
        .container{
            /*這裏造成bfc區域，不會與浮動的元素髮生重疊*/
            overflow: hidden;
            height: 200px;
            background-color: palevioletred;
        }

效果以下:

效果仍是同樣，此時的container區域就是一個bfc區域了，那麼它就不會被浮動元素蓋住，container的寬度就是減去left的寬度 + right的寬度，剩下的就是本身的區域，這樣不用像margin : 0 200px;左右撐開邊距，因此也就造成的寬度自適應，不過它的缺點也是顯而易見的，不能優先渲染container區域

聖盃佈局(重點)

1. 所謂聖盃佈局只不過比起三欄佈局多了一個需求:要求container區域優先渲染，那爲啥叫作聖盃佈局?由於長得像聖盃啊，看下圖:
   
   聖盃的兩隻手就像佈局的左邊藍和右邊欄同樣，被子的主體就像container內容區域同樣，具體的實現以下
   HTML：

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

css

*{
            margin: 0;
            padding: 0;
        }
        .werppar{
            background-color: pink;
            /*左右欄經過添加負的margin放到正確的位置了，此段代碼是爲了擺正中間欄的位置*/
            padding:0 200px;
        }

        .container,.left,.right{
            float: left;
            height: 200px;
        }
        .container{
            width:100%;
            height:200px;
            background:blue;
        }
        .left{
            width:200px;
            height:200px;
            /*margin負值，讓移動父級容器的寬度*/
            margin-left:-100%;
            background:#f40;
            /*中間欄的位置擺正以後，左欄的位置也相應右移，經過相對定位的left恢復到正確位置*/
            position:relative;
            left:-200px;
        }
        .right{
            width:200px;
            height:200px;
            margin-left:-200px;
            background:#0c9;
            /*中間欄的位置擺正以後，右欄的位置也相應左移，經過相對定位的right恢復到正確位置*/
            position:relative;
            right:-200px;
        }

能夠看下效果圖:

這就是所謂的聖盃佈局，那麼這個原理是什麼呢? 其實就是基於兩條 1.浮動2.margin負值，我來解釋解釋

1. 首先給他們的父級元素，padding || margin 留出左右邊欄的位置，而且此段代碼是爲了擺正中間欄的位置
2. 在給咱們的三個元素浮動起來，而後直接給 container 元素寬度100%,寬度全給了container 了，哪left和right天然會掉下去了
3. 哪怎麼把left和right弄到正確的位置呢? 這裏就要用到 magin 的負值了，結合浮動使用，那咱們知道浮動起來的幾個元素會拍成一行內，而寬度不夠纔會掉下去，這裏就是這種狀況，可是我給left元素一個margin-left負值到一個界限，它就會貼回到上一行，由於他們是一塊兒浮動的，因此咱們須要負一個它父容器的總寬度，這時候它回到的上一行，此時咱們還須要，使用定位將這個left元素，位移到正確的位置，這樣就很簡單left:-自身寬度便可,
4. right同理，你能夠看做是，原本他就應該在上面的，無奈由於寬度不夠，被擠下來了，此時我在給margin一個負的自身寬度，在使用定位right:-200px將其迴歸到正確的位置，🆗這樣就搞定了

方法五:雙飛翼佈局(重點)

1. 雙飛翼佈局實際上是根據聖盃佈局演化出來的一種佈局，具體代碼實現以下:
   HTML

<div class="werppar">
        <div class="box">
            <div class="container"></div>
        </div>
        <div class="left"></div>
        <div class="right"></div>
        <p style="clear: both;"></p>
    </div>

css

.werppar{
           width:100%;
        }

        .box,.left,.right{
            float: left;
            height: 200px;
        }
        .box{
            width:100%;
            height:200px;
        }
        .container{
            margin : 0 200px;
            height: 200px;
            background:blue;
        }
        .left{
            width:200px;
            height:200px;
            margin-left:-100%;
            background:#f40;
        }
        .right{
            width:200px;
            height:200px;
            margin-left:-200px;
            background:#0c9;
        }

效果以下:

這裏咱們能夠看出，這裏面和聖盃佈局其實差異不是很大，

1. 在這裏咱們能夠看出結構發生了改變，咱們的內容區域使用一個.box的元素包裹起來了，並且浮動的不再是.container元素了，這也就是說，container元素不會被外面的浮動元素所影響了
2. 其次咱們能夠發現，這裏的left:-100%就能回到想要的位置?這是爲何呢，須要注意的一點是，在這裏。left父級盒子是寬度100%的，再也不是聖盃佈局中留出來左右padding值的父級自適應寬度的盒子
3. 那麼同理了，right盒子也是由於這樣，因此直接margin-left:-200px正好貼到父級盒子最右邊，就能獲得想要的位置了

方法六：flex三欄佈局

1. 利用flex彈性盒子能夠很輕鬆的完成三欄佈局，而且可以達到content優先渲染的要求
   html

<div class="flex-box">
        <div class="flex-content flex-item">我是內容</div>
        <div class="flex-left flex-item">我是左邊欄</div>
        <div class="flex-right flex-item">我是右邊欄</div>
   </div>

css

.flex-box{
           display: flex;
       }
       .flex-left{
           width: 200px;
           height: 200px;
           background-color: lime;
           order: 0;
       }
       .flex-content{
           order: 1;
           width: 100%;
           background-color: aquamarine;
       }
       .flex-right{
           width: 200px;
           height: 200px;
           background-color: gold;
           order: 2;
       }

這裏就很簡單了，利用彈性盒子的手法，給子元素添加的屬性order，這個屬性意思爲在主軸方向的排列中顯示的優先級，值越小，優先級越高，放在最前的container最早渲染

筆記總結 🆗，就到這裏了，我還要繼續奮戰