結合CSS3的布局新特征談談常見布局方法
寫在前面
最近看到《圖解CSS3》的布局部分，結合自己以前閱讀過的一些布局方面的知識，這里進行一次基于CSS2、3的各種布局的方法總結。
常見的頁面布局
在拿到設計稿時，作為一個前端人員，我們首先會做的應該是為設計圖大致地劃分區域，然后選擇一種最合理的，結構清晰的布局。下面我先根據一些典型的網站案例列舉一下幾種常見的頁面布局。
T型布局
這個是我們比較常見的布局，其頁面的頂部一般放置橫網站的標志或Banner廣告，下方左側是導航欄菜單，下方右側則用于放置網頁正文等主要內容。
Segmentfault的主頁就是T型布局的。由于網頁太長了。。沒有截取底部。
國字型布局
國字型布局下最上面是網站的標題以及橫幅廣告條，接下來是網站的主要內寄，左右分列一些小條內容，中問是主要部分，與左右一起羅列到底，最下方是網站的一些基本信息、聯系方式、版權聲明等。
案例圖片來自騰訊11年的一道前段筆試題，有興趣的同學可以去看一下。2011騰訊前端面試稿
POP布局
POP布局指頁面布局像一張宣傳海報，以一張精美圖片作為頁面的設計中心。常用于時尚類站點。優點顯而易見：漂亮吸引人。缺點就是速度慢。
人大的主頁就類似這種布局。
左右布局型
顧名思義，就是網頁主體分為左右兩大塊，多見為后臺管理系統頁面。一般左右布局型的頁面需要做到兩列等高。
如：
上下布局型
參見蘋果的官網，類似于整屏顯示的網頁都為上下布局。
如何實現——常見的布局方法
關于布局的類型就先說這么多，下面來總結一下上述的布局怎么來實現。下面提一下大家應該都很熟悉的兩大布局方法。圣杯布局和雙飛燕布局。其實這兩種方法一般多用國字型布局上。就是針對三行三列布局的。進行相應的改造也可以用在T字型布局上。用這兩種方法可以很好地解決主體部分優先加載的問題。
圣杯布局
基礎布局：
<div id="header"></div> <div id="main"></div> <div id="footer"></div>
重點來看main部分的代碼
<style type="text/css">
#main {
overflow: hidden; /*修整由子元素浮動引起的高度塌陷問題*/
zoom: 1;/*低版本ie下:觸發haslayout屬性,修整由子元素浮動引起的高度塌陷問題*/
/*將主體部分左右側預留出左右邊欄大小的空白位置*/
padding: 0 300px 0 220px;
}
.m_content, .m_leftside, .m_rightside {
float: left;
/*目的是將左右側邊欄拉回*/
position: relative;
}
.m_content {
width: 100%;
}
.m_leftside {
width: 220px;
/*由于m_content占據了100%空間，所以需要用負的margin值將左邊欄拉回*/
margin-left: -100%;
/*將主體部分預留的左側補白區域填充滿*/
left: -220px;
}
.m_rightside {
width: 300px;
/*用負的margin值將右邊欄拉回自身大小個像素單位*/
margin-left: -300px;
/*將主體部分預留的右側補白區域填充滿*/
left: 300px;
}
</style>
<div id="main">
<div class="m_content">這里是主體</div>
<div class="m_leftside">這是左側邊欄</div>
<div class="m_rightside">這是右側邊欄</div>
</div> 以上就是圣杯布局方法，基本思路是運用浮動加定位的方法，缺點是代碼較復雜，不能模擬三欄等高效果。
雙飛燕布局
布局的效果跟圣杯的一樣，代碼有所不同。雙飛燕布局的代碼更加簡單，只是多加了一個div用來布局。
基礎布局部分代碼一樣。
main部分：
<style>
#main {overflow: hidden;zoom: 1;}/*這里不需要加padding了*/
.m_content, .m_leftside, .m_rightside {float: left;}
.m_content {width: 100%;}
/*用左右邊距將左右邊欄的位置預留出來*/
.m_c_wrap {margin-left: 220px;margin-right:300px;}
.m_leftside {width: 220px;margin-left: -100%;}
.m_rightside {width: 300px;margin-left: -300px;}
</style>
<div id="main">
<div class="m_content">
<!--正真的主體開始-->
<div class="m_c_wrap">這里是主體</div>
</div>
<div class="m_leftside">這是左側邊欄</div>
<div class="m_rightside">這是右側邊欄</div>
</div> 了解了以上兩種布局的方法后，很多布局都能寫得得心應手了。但是應對多欄等高布局還有點欠缺。那么現在來談談多欄等高布局的方法。
多欄等高布局
這里詳細總結了等高布局的八大方法 Click，我再談談實際項目中比較常用的，或者說比較簡單的三種方法。
圖片模擬
比如我們需要做一個上圖的布局，那么需要截取這樣一個側邊的小圖片對側邊和內容部分包裹的元素進行背景平鋪，用來模擬出側邊欄的高度跟內容高度一致的視覺效果。
table布局
只需要將需要等高的若干欄設置display屬性為table-cell；若其中一列希望是自適應寬度，還需將父元素的display設置成table，width為100%。
代碼如下：
<style>
#main {display: table;width: 100%}
.m_content {display: table-cell;width: auto;}
.m_rightside {display: table-cell;width: 200px;}
</style>
<div id="main">
<div class="m_content"></div>
<div class="m_rightside"></div>
</div> padding補白
這是前不久在網上看到的一種辦法，實質就是為欄目添加一個足夠大的padding-bottom值，將欄目撐開，然后再添加相同大小的負的margin-bottom值將內容移動回來。注意要在負盒子上加上overflow: hidden的屬性。
代碼如下：
<style>
#main {width: 100%;overflow: hidden;}
.m_content {width: auto;float:left;}
.m_rightside {width: 200px;padding-bottom: 10000px;margin-bottom: 10000px;float:left;}
</style>
<div id="main">
<div class="m_content"></div>
<div class="m_rightside"></div>
</div> CSS2的布局方法總結得到這里就告一段落了。現在來看看CSS3新增的布局方法。
Flex布局
因為書面上的解釋比較抽象，我這里就盡量說得簡單通俗一點。