【聊一聊】css中的經典佈局——聖盃佈局

     什麼是聖盃佈局？

     聖盃佈局是三列布局，中間寬度自適應，兩邊定寬，這樣作的優點是重要的東西放在文檔流前面能夠優先渲染。也就是在html文檔中，中間的部分要寫在左右佈局以前。

     固然，這種佈局是面向PC端的，移動端因爲屏幕寬度較小，不推薦多列布局。

     聖盃佈局須要用到什麼東西？

     （1）聖盃佈局，須要用到浮動，負邊距，相對定位（相對於自身定位relative），這種方法不須要添加額外的標籤。

     （2）關於margin或者padding單位是百分比的時候，它是基於父級元素或者包含塊的寬度來進行計算的。

     探索聖盃佈局

     首先咱們列出一個基本的DOM結構。      

<div class="header">Header</div>
<div class="bd">
    <div class="main">Main</div>
    <div class="left">Left</div>
    <div class="right">Right
    </div>
</div>
<div class="footer">Footer</div>

    效果最終樣式：    

*{
        padding:0;margin:0;
    }
    .header,.footer{
        height:50px;
        width:100%;
        background:#666;
        clear:both;
    }
    .bd{
        padding-left:150px;
        padding-right:190px;
    }
    .main{
        width:100%;
        float:left;
        background:#D6D6D6;
    }
    .left{
        width:150px;
        background:#E79F6D;
        float:left;
        margin-left:-100%;  /*相對於包含快的寬度*/
        position:relative;
        left:-150px;
    }
    .right{
        float:left;
        width:190px;
        background:#77BBDD;
        margin-left:-190px;
        position:relative;
        right:-190px;
    }

View Code

左中右佈局變化過程

 一、中間部分須要根據瀏覽器寬度的變化而變化，因此要用100%，這裏設左中右向左浮動，由於中間100%，左層和右層根本沒有位置上去，被擠下去了。

    .main{
        width:100%;
        float:left;
        background:#D6D6D6;
    }
    .left{
        width:150px;
        background:#E79F6D;
        float:left;
    }
    .right{
        float:left;
        width:190px;
        background:#77BBDD;
    }

到這裏咱們會發現，main因爲是100%的寬度，因此它會把left和right兩塊給擠下去，並且因爲在文檔中，main是在left和right以前渲染的，所以，它會在left和right的上面顯示。

若是我把html的順序調一下。

那麼，文檔渲染的順序也會相應發生變化。

 二、把左層設置margin-left:-150px後，發現left上去了，由於負到出窗口沒位置了，只能往上挪。（若是margin-left:-100px發現仍是上不去，而是左移出窗口，留下剩餘的在顯示在窗口中）。

三、那麼按第二步這個方法，能夠得出它只要挪動窗口寬度那麼寬就能到最左邊了，利用負邊距，把左右欄定位（左欄先上去，右欄再上去）。

    .main{
        width:100%;
        float:left;
        background:#D6D6D6;
    }
    .left{
        width:150px;
        background:#E79F6D;
        float:left;
        margin-left:-100%;  /*相對於包含快的寬度*/
    }
    .right{
        float:left;
        width:190px;
        background:#77BBDD;
        margin-left:-190px;
    }

四、然而問題來了，中間被左右擋住了啊，只好給外層加padding了。

.bd{
        padding-left:150px;
        padding-right:190px;
    }

五、可是加了以後左右欄也縮進來了，因而採用相對定位方法(relative相對自身定位)，各自相對於本身把本身挪出去，獲得最終結果 

   .left{
        width:150px;
        background:#E79F6D;
        float:left;
        margin-left:-100%;  /*相對於包含快的寬度*/
        position:relative;
        left:-150px;
    }
    .right{
        float:left;
        width:190px;
        background:#77BBDD;
        margin-left:-190px;
        position:relative;
        right:-190px;
    }

所以，這樣就實現了，三列布局，左右固定寬度，中間隨瀏覽器寬度進行自適應。