CSS佈局
佈局是CSS中一個重要部分，本文總結了CSS佈局中的常用技巧，包括常用的水平居中、垂直居中方法，以及單列佈局、多列佈局的多種實現方式（包括傳統的盒模型佈局和比較新的flex佈局實現），希望能給需要的小伙伴帶來一些幫助。
目錄
1.常用居中方法：水平居中，垂直居中，
2.單列佈局
3.二列&三列佈局： float+margin，position+margin，聖杯佈局（float+負margin），雙飛翼佈局（float+負margin），flex佈局
如果你想學習交流html5css3等web前端技術，想多了解一些前端方面的內容，可以加入我們的QQ學習群：27062964，一起學習交流，提升自己，有學習資料和源碼分享。或點選連結直接加入QQ群：
總結
#1.常用居中方法
在版面配置中很常見，我們假設DOM文檔結構如下，子元素要居父元素：
水平居中
子元素為行內元素還是塊狀元素，寬度一定還是寬度未定，採取的佈局方案不同。以下進行分析：
行內元素：對父元素設定text-align:center;
#定寬塊狀元素: 將左右margin值為auto;
不定寬塊狀元素: 設定子元素為display:inline,然後在父元素上設定text-align:center;
通用方案: flex佈局，對父元素設定display:flex;justify-content:center;
垂直居中
垂直居中對於子元素是單行內聯文字、多行內聯文字以及區塊狀元素採用的方案是不同的。
父元素一定，子元素為單行內聯文字：設定父元素的height等於行高line-height
父元素一定，子元素為多行內聯文字：設定父元素的display:table-cell或inline-block，再設定vertical-align:middle;
#塊狀元素:設定子元素position:fixed（absolute），然後設定margin:auto;
通用方案: flex佈局，為父元素設定{display:flex; align-items:center;}。
2.單列佈局
特徵：定寬、水平居中
常見的單列佈局有兩種：
一種是header、content、footer寬度都相同，其一般不會佔滿瀏覽器的最寬寬度，但當瀏覽器寬度縮小低於其最大寬度時，寬度就會自適應。
一種是header、footer寬度為瀏覽器寬度，但content以及header和footer裡的內容不會佔滿瀏覽器寬度。
對於第一種，對header、content、footer統一設定width或max-width，並透過margin:auto實現居中。
DOM文件:
#CSS清單:
#對於第二種，header、footer的內容寬度為100%，但header、footer的內容區以及content統一設定max-width，並透過margin:auto實現居中。
DOM文件:
#CSS清單:
#
3. 二列&三列佈局
二列佈局的特徵是側邊欄固定寬度，主欄自適應寬度。三列佈局的特徵是兩側兩列固定寬度，中間列自適應寬度。
之所以將二列佈局和三列佈局寫在一起，是因為二列佈局可以看做去掉一個側欄的三列佈局，其佈局的思想有異曲同工之妙。對於傳統的實現方法，主要討論上圖中前三種佈局，經典的帶有側欄的二欄佈局以及帶有左右側欄的三欄佈局，對於flex佈局，實現了上圖的五種佈局。
a. float+margin
原理說明：設定兩個側邊欄分別向左向右浮動，中間列透過外側距給兩個側邊欄騰出空間，中間列的寬度根據瀏覽器視窗自適應。
DOM文檔:
佈局步驟:
對兩邊側邊欄分別設定寬度，並對左側欄新增左浮動，右側欄新增有浮動。
對主面板設定左右外邊距，margin-left的值為左側欄的寬度，margin-right的值為右側欄的寬度。
CSS清單:
#一些說明:
* 注意DOM文檔的書寫順序，先寫兩側邊欄，再寫主面板，更換後則側邊欄會被擠到下一列（聖杯佈局和雙飛翼佈局都會用到）。 * 這種佈局方式比較簡單明了，但缺點是渲染時先渲染了側邊欄，而不是比較重要的主面板。
二列的實作方法
如果是左邊有側邊欄的二欄佈局，則去掉右側欄，不要設定主面板的margin-right值，其他動作相同。反之亦然。
b. position+margin
原理說明：透過絕對定位將兩個側邊欄固定，同樣透過外側距給兩個側邊欄騰出空間，中間列自適應。
DOM文件:
#佈局步驟:
對兩邊側邊欄分別設定寬度，設定定位方式為絕對定位。
設定兩邊欄的top值皆為0，設定左側欄的left值為0， 右側欄的right值為0。
對主面板設定左右外邊距，margin-left的值為左側欄的寬度，margin-right的值為右側欄的寬度。
CSS清單:
#一些說明:
與上一個方法相比，本種方法是透過定位來實現側欄的位置固定。
如果中間欄含有最小寬度限制，或是含有寬度的內部元素，則瀏覽器視窗小到一定程度，主面板與側邊欄會重疊。
二列的實作方法
如果是左邊有側邊欄的二欄佈局，則去掉右側欄，不要設定主面板的margin-right值，其他動作相同。反之亦然。
c. 聖杯佈局(float + 負margin + padding + position)
原理說明：
主面板設定寬度為100%，主面板與兩個側邊欄都設定浮動，常見為左浮動，這時兩個側欄會被主面板擠下去。透過負邊距將浮動的側邊欄拉上來，左側欄的負邊距為100%，剛好是視窗的寬度，因此會從主面板下方的左邊跑到與主面板對齊的左邊，右側欄此時浮動在主面板下方的左邊，設定負邊距為負的自身寬度剛好浮動到主面板對齊的右邊。為了避免側欄遮擋主面板內容，在外層設定左右padding值為左右側欄的寬度，給側欄騰出空間，此時主面板的寬度減少。由於側邊欄的負margin都是相對主面板的，兩個側邊欄並不會像我們理想中的停靠在左右兩邊，而是跟著縮小的主面板一起向中間靠攏。此時使用相對佈局，調整兩個側欄到對應的位置。
DOM文件:
#
#
#」版面步驟:
三者都設定向左浮動。
設定main寬度為100%，設定兩邊欄的寬度。
設定 負邊距，sub設定負左邊距為100%，extra設定負左邊距為負的自身寬度。
設定main的padding值為左右兩個子麵板留出空間。
設定兩個子麵板為相對定位，sub的left值為負的sub寬度，extra的right值為負的extra寬度。
CSS清單:
#某些說明
DOM元素的書寫順序不得更改。
當面板的main內容部分比兩邊的子麵板寬度小的時候，佈局就會亂掉。可以透過設定main的min-width屬性或使用雙飛翼佈局來避免問題。
二列的實作方法
如果是左邊有側邊欄的二欄佈局，則去掉右側欄，不要設定主面板的padding-right值，其他動作相同。反之亦然。
d. 雙飛翼佈局(float + 負margin + margin)
#原理說明：
雙飛翼佈局和聖杯佈局的思想有些相似，都利用了浮動和負邊距，但雙飛翼佈局在聖杯佈局上做了改進，在main元素上加了一層div, 並設置margin,由於兩側欄的負邊距都是相對於main-wrap而言，main的margin值變化便不會影響兩個側欄，因此省掉了對兩側欄設定相對佈局的步驟。
DOM文檔:
佈局步驟:
三者都設定向左浮動。
設定main-wrap寬度為100%，設定兩個側欄的寬度。
設定 負邊距，sub設定負左邊距為100%，extra設定負左邊距為負的自身寬度。
設定main的margin值給左右兩個子麵板留出空間。
CSS清單:
#一些說明
聖杯採用的是padding，而雙飛翼採用的margin ，解決了聖杯佈局main的最小寬度不能小於左側欄的缺點。
雙飛翼佈局不用設定相對佈局，以及對應的left和right值。
透過引入相對佈局，可以實現三欄佈局的各種組合，例如對右側欄設定position: relative; left: 190px;,可以實現sub+extra+main的佈局。
二列的實作方法
如果是左邊有側欄的二欄佈局，則去掉右側欄，不要設定main-wrap的margin-right值，其他操作相同。反之亦然。
以下是五種佈局的flex佈局代碼：
DOM文檔：
#CSS清單
與先前所講的幾種傳統佈局方案相比，flex佈局的程式碼可謂異常簡潔，而且非常通用，利用簡單的三行CSS即實現了常見的五種佈局。
總結
傳統的佈局方法是基於盒狀模型，依賴display屬性+position屬性+float屬性，邏輯相對複雜，對於實現一些特殊效果，例如垂直居中，尤其複雜繁瑣。而flex佈局中的flex容器可以根據實際可用空間動態調整子元素的寬高比和順序，使元素能夠盡可能地利用可用空間，同時也能透過縮小來避免超出。 flex版面提供了一套簡單、完整、響應式的版面方案。
