聖盃佈局以及雙飛燕佈局（柵格）

部分轉自：什麼是聖盃佈局、雙飛翼佈局？

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

可是聖盃佈局和雙飛翼佈局在實現方式上有一點差異。

聖盃佈局的來歷是2006年發在a list part上的這篇文章： 
http://alistapart.com/article/holygrail 
雙飛翼佈局介紹-始於淘寶UED： 
http://www.imooc.com/wenda/detail/254035

聖盃佈局

1. 三者都設置向左浮動。
2. 設置中間的寬度爲100％。
3. 設置負邊距margin-left。左部分設置-100％,.右部分設置-width px。
4. 設置容器的padding值給左右兩部分留出空間。
5. 設置左右部分爲相對定位。左部分left的爲-width，右部分right爲-width。

HTML

<div id="container">
    <!--先寫中間部分-->
    <div id="main" class="col"></div>
    <div id="left" class="col"></div>
    <div id="right" class="col"></div>
</div>

主體main放置在最前面能夠優先加載。

CSS

body {min-width: 550px;} 

.col {position: relative;float: left;}

#container {padding: 0 190px 0 190px;}

#main {width: 100%;height: 400px;background-color: #ccc;}

#left {width: 190px;height: 400px;margin-left: -100%;left: -190px;background-color: #0000FF;}

#right {width: 190px;height: 400px;margin-left: -190px;right: -190px;background-color: #FF0000;}

聖盃佈局有個問題，當面板的中間部分比兩邊的子面板寬度小的時候，佈局就會亂掉。

 

雙飛翼佈局

HTML

<div id="container">
    <div id="main" class="col">
        <div id="main-wrap"></div>
    </div>
    <div id="left" class="col"></div>
    <div id="right" class="col"></div>
</div>

 

與聖盃佈局相比，雙飛翼HTML中爲main添加了一個子元素main-wrap,這個小小的改動是爲了以後處理main中內容被遮蓋的問題，這也是二者實現方式最大的不一樣點。

CSS

body {min-width: 550px;}
.col {float: left;}

#main {width: 100%;height: 400px;background-color: #ccc;}

#main-wrap {margin: 0 190px 0 190px;}

#left {width: 190px;height: 400px;margin-left: -100%;background-color: #0000FF;}

#right {width: 190px;height: 400px;margin-left: -190px;background-color: #FF0000;}

 

與聖盃佈局同樣，一開始三個col都設置float: left,爲了把left和right定位到左右部分，採用負邊距，left部分margin-left: -100%，right部分margin-right: -190px。

以後就是處理main中內容的遮蓋問題，只需設置main-wrap的左右外邊距便可解決。

相比聖盃佈局，雙飛翼沒必要設置左右欄的position: relative，也沒必要設置左右left、right值，只需#main多添加一個子元素包含，相應的padding換成margin。總的說來簡單很多。

 

雙飛翼佈局的好處：

1. 主要的內容先加載的優化；
2. 兼容目前全部的主流瀏覽器，包括IE6在內；（就一個針對ie6的清除浮動hack:_zoom: 1;）
3. 實現不一樣的佈局方式，能夠經過調整相關CSS屬性便可實現。（可搭配實現一套柵格化佈局系統）

什麼是柵格化佈局：

簡單點說就是：像ps中的參考線同樣，用若干水平參考線和垂直參考線將畫布(網頁)分割成若干份以便於佈局排版。固然這個水平參考線和垂直參考線並非隨便拉的而是有規律的。

標準的柵格化公式

                                      W = c * n + g * (n - 1) + 2 * m

在實際操做過程當中，咱們會省略掉最左邊和最右邊的那兩個外邊距，也就是說w1的寬度纔是總寬度。

                                            w1=(c + g) * n - g

寫模板與是有講究的，爲了儘量減小代碼且發揮代碼最大的公用性，咱們可使用父級控制子級。每次佈局結構不一樣時，咱們只修改父級樣式名就能夠實現佈局變換。

 

 

若是咱們要求佈局以下：

回到前面的公式中，咱們套用下公式可得出：190=(c+10)*n-10，化簡後：200=(c+10)*n此時，c和n是未知的，因此能夠有推算出幾種組合(注意：n是正整數！)。

例：c=190,n=1、c=90,n=2、c=40,n=4、c=30,n=5、c=15,n=8等。若是讓c=30，此時父級樣式名爲：grid-c2-m0s5，若是讓c=40，此時父級樣式名爲：grid-c2-m0s4。

這個要看我的喜愛了，若是習慣c=30。有了父級樣式後，咱們來改造下css樣式便可實現靈活佈局了。

html：

<div class="col grid-c2-m0s1 clearfix">
  <div class="col-main">
    <div class="main-wrap">grid-c2-m0s1</div>
  </div>  
  <div class="col-sub">sub=30</div>
</div>

css：

雙飛翼：

.col-main{float:left;width:100%;height:50px;}
.main-wrap{background:#666;height:100%}
.col-sub{float:left;height:50px;background:#ccc;}

柵格：

/*兩列  左主右側*/
.grid-c2-m0s1{}
.grid-c2-m0s1 .main-wrap{margin-right:40px}
.grid-c2-m0s1 .col-sub{width:30px;margin-left:-30px}

 

 

 

有了這些模板庫後，當咱們頁面佈局須要變更時直接修改父級class便可實現對應佈局