雙飛翼佈局和聖盃佈局的理解

在好久之前，有了解過雙飛翼佈局，但那是僅僅只是瞭解，當時知道怎麼樣去佈局，可是在後來的實際項目中沒有用到，就往了怎麼回事了；

前不久去面試，有被問到了這個問題，當時只記得聽過，可是具體怎麼實現的就全然不知了，因此特意瞭解了下，並理解了實現原理。

其實最重要的就是利用 float 屬性，使盒子脫離文檔流；一下記錄一下實現方法；

第一步：實現基本佈局

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

main{
    width: 100%;
    height: 100px;
    overflow: hidden;
    div{
        height: 100px;
        float: left;
        word-break: break-all;

    }
    .center{
        background: yellow;
        width: 100%;
    }
    .left{
        width: 100px;
        background: deepskyblue;
    }
    .right{
        width: 100px;
        background: red;
    }
}

 

看起來是這樣的；只須要作一些調整就ok了，利用margin-left 到達左右佈局；left盒子  margin-left ：-100%；right 盒子 margin-left ：-100px;這樣佈局基本完成；效果是這樣的

 

那麼問題來了，中間的盒子就被兩邊盒子遮擋住了一部分；接下來就是雙飛翼佈局和聖盃佈局的差別了，實現的目的是相同的，只不過是思想不一樣；

聖盃佈局注意利用父級的內邊距，也就是padding，而後左右兩個盒子的相對定位；讓左邊盒子向左移，右邊盒子向右移動就搞定；

一下是完整的css 代碼；

.main{
    width: 100%;
    height: 100px;
    overflow: hidden;
    padding: 0 100px;
    div{
        height: 100px;
        float: left;
        word-break: break-all;
    }
    .center{
        background: yellow;
        width: 100%;
    }
    .left{
        position: relative;
        width: 100px;
        background: deepskyblue;
        margin-left: -100%;
        left: -100px;
    }
    .right{
        position: relative;
        width: 100px;
        background: red;
        margin-left: -100px;
        right: -100px;
    }
}

 

其實我還有一種方法也能實現，也是經過padding ；設置center  中間盒子 padding ： 0 100px; 一樣能夠達到效果。我的以爲沒有什麼問題；但仍是須要實踐。也不用給左右兩邊盒子設置 相對定位了，這樣代碼量還會少一點；可是這樣的話要是給中間盒子設置一個圖片背景就話就會麻煩一點，因此仍是用經典的聖盃佈局和雙飛翼吧。經典是有緣由的，是通過時間和實踐的考考驗的。