CSS佈局之聖盃佈局和雙飛翼佈局

1、寫在前面

 

聖盃佈局和雙飛翼佈局網上有不少的文章來介紹。有的圖文並茂的寫的很細，看着很舒服。有的寫的格式很亂，沒圖沒真相，看着很捉急。然而這些文章裏沒有一篇是讓本身看完後徹底明白的，因而仔細瞭解了聖盃佈局和雙飛翼佈局，下面對聖盃佈局和雙飛翼佈局分別分解介紹一下，但願之後再看的時候能迅速幫助本身理解。

 

2、聖盃佈局

 

聖盃佈局主要有下面這些種（圖片來自http://www.cnblogs.com/lyzg/p/5160570.html）。

 

文中介紹聖盃佈局使用三欄式，左右兩邊定寬，中間主要部分根據窗口寬度自適應調整自身，如圖所示。

 

 

接下來從最基本樣式起，按步驟來介紹一下聖盃佈局的實現原理。

div元素：

<div class="bd">
    <div class="main">Main</div>
    <div class="aside left">Left</div>
    <div class="aside right">Right</div>
</div>

 

元素中，之因此將main所在元素設置在left和right所在元素以前，是要保證網頁在加載過程當中首先加載網頁主題內容，使其優先渲染，以避免網頁加載時間過長主要部分出現空白。

基本樣式：

.bd {
    height: 65px;
    line-height: 65px;
    text-align: center;    
}
            
.main {
    float: left;
    width: 100%;
    height: 100%;
    background-color: #0088CC;   
}
            
.aside {
    float: left;
    height: 100%;
}
            
.left {
    width: 140px;
    background-color: #31B0D5;
}
            
.right {
    width: 180px;
    background-color: #39B3D7;
}

 

效果圖以下：

 

 

基本樣式中將main、left和right元素的float屬性設置爲left。接下來將left和right元素移到和Main爲同一行，這裏用到的是使元素上移。經過設置left元素margin-left屬性爲-100%使left上移一行到行首，設置right元素margin-left屬性爲-180px使right上移一行到行尾。代碼及效果以下。

.bd {
    height: 65px;
    line-height: 65px;
    text-align: center;    
}
            
.main {
    float: left;
    width: 100%;
    height: 100%;
    background-color: #0088CC;   
}
            
.aside {
    float: left;
    height: 100%;
}
            
.left {
    width: 140px;
    margin-left: -100%;
    background-color: #31B0D5;
}
            
.right {
    width: 180px;
    margin-left: -180px;
    background-color: #39B3D7;
}

 

 

如上圖所示，left和right元素上移以後分別蓋住了main元素的左右部分，實際上main的左右部分仍是存在的。

 

爲了解決這個問題這裏設置包裹main元素和側邊元素的父容器bd的padding-left爲150px,padding-right爲190px。代碼及效果以下：

.bd {
    height: 65px;
    padding-left: 150px; //added
    padding-right: 190px; //added
    line-height: 65px;
    text-align: center;    
}
            
.main {
    float: left;
    width: 100%;
    height: 100%;
    background-color: #0088CC;   
}
            
.aside {
    float: left;
    height: 100%;
}
            
.left {
    width: 140px;
    margin-left: -100%;
    background-color: #31B0D5;
}
            
.right {
    width: 180px;
    margin-left: -180px;
    background-color: #39B3D7;
}

 

 

在對bd增長了padding-left和padding-right以後，main部分變短了，可是left和right部分也跟着移動了，而且依然遮蓋住了main的左右部分。

 

這時就須要聖盃佈局中關鍵一步，給left和right設置position爲relative，並設置left元素的left屬性值爲-150px，設置right元素的right屬性值爲-190px。目的是讓left和right元素分別相對自身所在位置向左和向右偏移180px和190px。代碼和最終效果以下。

.bd {
    height: 65px;
    padding-left: 150px;
    padding-right: 190px;
    line-height: 65px;
    text-align: center;    
}
            
.main {
    float: left;
    width: 100%;
    height: 100%;
    background-color: #0088CC;   
}
            
.aside {
    position: relative; //added
    float: left;
    height: 100%;
}
            
.left {
    width: 140px;
    left: -150px; //added
    margin-left: -100%;
    background-color: #31B0D5;
}
            
.right {
    width: 180px;
    right: -190px; //added
    margin-left: -180px;
    background-color: #39B3D7;
}

 

 

這裏之因此設置父容器bd的padding左右距離比實際上left和right元素的寬度多出10px是爲了顯示出上圖中左右元素和中間main元素的小間隔，沒什麼多餘的用處。至此，就介紹完聖盃佈局了，基本原理很簡單。

 

3、雙飛翼佈局

 

雙飛翼佈局相比聖盃佈局，在main元素的外面加了一層main_out，而且一樣須要保證main_out元素必須放在最前面。下面依然從最簡單的代碼逐步分析。

最終效果：

 

div元素：

<div class="bd">
    <div class="main_out">
        <div class="main">Main</div>
    </div>
    <div class="aside left">Left</div>
    <div class="aside right">Right</div>
<div>

 

基礎樣式：

.main_out, .aside {
    float: left;
    height: 65px;
    line-height: 65px;
    text-align: center; 
}
            
.main_out {
    width: 100%;    
}

.aside {
    background-color:#31B0D5;       
}
                        
.main {
    height: 100%;
    background-color:#0088CC;
}
            
.left {
    width: 140px;
}
            
.right {
    width: 180px;
}

  

上圖能夠看出，最原始的樣式做用在div元素中得出的效果和聖盃佈局最開始的效果相同，而且依然須要設置三欄float爲left。

 

一樣，下面也是須要將左右兩個元素移到於main元素同一行，代碼及移動後的效果如圖。

.main_out, .aside {
    float: left;
    height: 65px;
    line-height: 65px;
    text-align: center; 
}
            
.main_out {
    width: 100%;    
}

.aside {
    background-color:#31B0D5;       
}
                        
.main {
    height: 100%;
    background-color:#0088CC;
}
            
.left {
    margin-left: -100%; //added
    width: 140px;
}
            
.right {
    margin-left: -190px; //added   
    width: 180px;
}

  

 

上圖中實際上left、right元素遮住了main元素的左右兩邊，所以這裏須要將main元素的兩邊空出來以供放置左右兩邊，而這裏的實現正是雙飛翼佈局和聖盃佈局不一樣的地方。雙飛翼佈局在這步作的很簡單，就是將main元素的margin-left和margin-right分別設置爲150px和190px，這樣就能夠實現main元素兩邊空出來放置left和right元素。

.main_out, .aside {
    float: left;
    height: 65px;
    line-height: 65px;
    text-align: center; 
}
            
.main_out {
    width: 100%;    
}

.aside {
    background-color:#31B0D5;       
}
                        
.main {
    margin-left: 150px; //added
    margin-right: 190px; //added
    height: 100%;
    background-color:#0088CC;
}
            
.left {
    margin-left: -100%;
    width: 140px;
}
            
.right {
    float: right; //added
    margin-left: -190px; 
    width: 180px;
}

 

 

 

通過上面設置main的左右margin就能夠實現左右欄和中間欄的分開，樣式中增長右邊欄爲右浮動是爲了顯示出右邊欄和main邊欄之間的空格。 

 

4、總結

 

由以上分析能夠看出，聖盃佈局和雙飛翼佈局解決問題的方案在前一半相同，main、left和right三欄均設置爲浮動，左右兩欄均須要設置margin-left爲負值才能讓其與main並排，以造成最基本的三欄佈局。 

 

不一樣點在於解決中間欄被左右欄遮擋問題的思路不一樣：

 

聖盃佈局：爲了是中間欄不被遮擋，將main、left和right的外層包裹bd設置了padding-left和padding-right，設置左右欄的position屬性爲relative，並分別對應左右欄設置left和right屬性，一邊使左右欄分別左右移動到空出的padding空間，以此來保證部遮擋中間欄。

 

雙飛翼佈局：爲了中間欄內容不被遮擋，將main元素放在main_out元素內，使main_out元素與left和right元素同級。接下來在main元素中使用margin-left和margin-right爲左右欄留出空白位置。

 

雙飛翼佈局相較於聖盃佈局，多了一個main_out 元素，但少用了大體4個Css屬性（聖盃佈局bd元素的padding-left和padding-right屬性<2個>，左右欄分別使用了一個position：relative屬性<2個>，及對應的left和right屬性<2個>；雙飛翼佈局的main元素使用了margin-left和margin-right屬性<2個>。6-2=4）。簡單來講，雙飛翼佈局比聖盃佈局多建立了一個div，可是沒有用到相對佈局，所以理解起來比聖盃佈局更直接和簡潔。 

 

5、參考

 

http://www.cnblogs.com/imwtr/p/4441741.html

http://www.jianshu.com/p/c3f33f4aed02/comments/1072948

http://www.cnblogs.com/lyzg/p/5160570.html

http://www.zhihu.com/question/21504052