很多人對CSS的布局有困惑，實際的應用場景中由于布局種類多難以選擇。今天我花些時間總結下自己對CSS布局的了解，分析下了解各種布局的優劣，同時希望能分享給初入前端的朋友們一些在布局上的經驗，如果有那些地方總結的不好，歡迎大家指正。言歸正傳，現在就來揭開各種布局的面紗。
單列布局
<div class="child"></div> 水準居中
水準居中的布局方式是最常見的一種，常常用于頭部、内容區、頁腳，它主要的作用是控制盒子在整個頁面以水準居中的方式呈現。
使用margin：0 auto來實作
.child{width:800px; margin: 0 auto;}
1
優勢：相容性好
劣勢：需要指定盒子 寬度
1.使用table來實作
.child{display: table; margin: 0 auto;}
優勢：不需要父容器parent，隻需要對自身進行設定
劣勢：IE6、7需要調整結構
2.使用inline-block和text-align來實作
.parent{text-align: center;}
.child{display: inline-block;}
劣勢：需要同時設定子元素和父元素
3.使用絕對定位absolute來實作
使用絕對定位來實作水準居中布局有兩種情況，一種子容器無寬度，另一種子容器有寬度。無寬度可以用一下代碼，如果是有寬度，則可以設定margin-left負值為容器寬度的一半。
.parent{position: relative;}
.child{position: absolute; left: 50%; transform: translateX(-50%);}
優勢：無需設定容器寬度，在移動端可以使用
劣勢：相容性差，需要IE9及以上浏覽器的支援
4.使用flex布局來實作
flex有兩種方法來實作水準居中，父容器設定display：flex， 一種直接在父容器中設定justify-content屬性值center。第二種在子容器中使用margin： 0 auto
.parent{display: flex; justify-content: center;}
.parent{display: flex;}
.child{margin: 0 auto;}
優勢：實作起來簡單，尤其是使用在響應式布局中
劣勢：相容性差，如果大面積的使用該布局可能會影響效率
垂直居中
這邊說的垂直居中是子容器無高的垂直居中，并非單行文本垂直居中line-height
1.使用絕對定位absolute來實作（同水準居中的使用方法，優劣一樣）
.child{position: absolute; top: 50%; transform: translateY(-50%);}
2.使用flex來實作
.parent{display: flex; align-items: center;}
3.使用display：table-cell來實作
.parent{display: table-cell;vertical-align: middle;height: 400px;}
總結：将水準居中和垂直居中兩種布局方法互相的結合起來就可以實作水準居中布局。這邊隻舉一個用絕對定位來實作水準垂直居中布局的方法，别的方法大家可以嘗試自己練習。（以下介紹各種布局時都是基于上面水準和垂直居中的方法，所有對于它們的優劣就不再分析。）
.child{position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);}
多列布局
多列布局也是非常常見的，适用于一側定寬，另一側自适應的布局。
浮動布局
前段時間我總結過關于兩列浮動布局方法，這裡我就不再從新總結了，如果有興趣的朋友可以參考前端時間關于浮動布局的方法（總結）這篇部落格。
多列等分布局
多列等分布局常常出現在内容中，多數為同功能、同階級内容的并排顯示。
HTML代碼
<div class="column">1</div>
<div class="column">2</div>
<div class="column">3</div>
<div class="column">4</div> 1.使用flex來實作多列布局
.column{flex: 1;}
.column+ .column{margin-left: 20px;}
2.使用table來實作多列布局
.parent{display: table; table-layout: fixed; width: 100%;}
.column{display: table-cell; padding-left: 20px;}
3.使用float來實作多列布局
.column{float: left; width: 25%; padding-left: 20px; box-sizing: border-box;}
提示：使用table和float實作多列布局的時候需要注意，如果要設定背景顔色則必須将.column盒子作為父容器在其裡面添加一個子容器，在設定背景顔色，如果直接在.column容器中設定背景顔色會由于padding而無法産生盒子之間的間距。
九宮格布局
<div class="row">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<div class="row">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<div class="row">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div> 1.使用flex來實作九宮格布局
.parent{display: flex; flex-direction: column;width: 300px;}
.row{height: 100px; display: flex;border: 1px solid red;}
.item{width: 100px; background-color: #ccc;border: 1px solid red;}
2.使用table來實作九宮格布局
.row{display: table-row;}
.item{display: table-cell; width: 33.3%; height: 200px; border: 1px solid red;}
全屏布局
<div class="top"></div>
<div class="left"></div>
<div class="right"></div>
<div class="bottom"></div> 使用絕對定位實作全屏布局
html,body,.parent{height: 100%; overflow: hidden;}
.top{position: absolute; top: 0; left: 0; right: 0; height: 0; background-color: black; height: 100px;}
.left{position: absolute; top: 100px; left: 0;bottom: 50px; width: 200px; background-color: orange;}
.right{position: absolute; top: 100px; left: 200px; right: 0; bottom: 50px; background-color: grey; overflow: hidden;}
.bottom{position: absolute; left: 0; right: 0; bottom: 0; height: 50px; background-color: pink;}
響應式布局
meta标簽的使用
使用媒體查詢
@media screen and (max-width: 480px){
/*螢幕小于480px的樣式*/ }
總結：這些布局方法有些經常用到，有些由于相容性的問題在具體項目相中使用的情況相對較少，不過對于移動端來說，以上總結的布局都是實用。今天特意花些時間來整理這些布局，一是為了鞏固知識，二是希望這些方法能夠分享給前端的初學者，讓他們對布局有更深入的了解，當然這些并非是CSS中的所有布局方法，以後發現有什麼布局沒有總結到的，我會繼續更新、分享，如果哪位同行對布局方法有所補充，或者發現部落格中存在問題，歡迎互相交流。