很多人對(duì)CSS的布局有困惑,，實(shí)際的應(yīng)用場(chǎng)景中由于布局種類(lèi)多難以選擇,。今天我花些時(shí)間總結(jié)下自己對(duì)CSS布局的理解,，分析下了解各種布局的優(yōu)劣,，同時(shí)希望能分享給初入前端的朋友們一些在布局上的經(jīng)驗(yàn),，如果有那些地方總結(jié)的不好,，歡迎大家指正,。言歸正傳，現(xiàn)在就來(lái)揭開(kāi)各種布局的面紗,。

單列布局

<div class="parent">
    <div class="child"></div>
</div>
1
2
3

水平居中

       水平居中的布局方式是最常見(jiàn)的一種,，常常用于頭部、內(nèi)容區(qū),、頁(yè)腳,，它主要的作用是控制盒子在整個(gè)頁(yè)面以水平居中的方式呈現(xiàn)。

使用margin：0 auto來(lái)實(shí)現(xiàn)

.child{width:800px; margin: 0 auto;}
1

       優(yōu)勢(shì)：兼容性好
       劣勢(shì)：需要指定盒子 寬度

1.使用table來(lái)實(shí)現(xiàn)

.child{display: table; margin: 0 auto;}
1

       優(yōu)勢(shì)：不需要父容器parent,，只需要對(duì)自身進(jìn)行設(shè)置
       劣勢(shì)：IE6,、7需要調(diào)整結(jié)構(gòu)

2.使用inline-block和text-align來(lái)實(shí)現(xiàn)

.parent{text-align: center;}
.child{display: inline-block;}
1
2

       優(yōu)勢(shì)：兼容性好
       劣勢(shì)：需要同時(shí)設(shè)置子元素和父元素

3.使用絕對(duì)定位absolute來(lái)實(shí)現(xiàn)

       使用絕對(duì)定位來(lái)實(shí)現(xiàn)水平居中布局有兩種情況，一種子容器無(wú)寬度,，另一種子容器有寬度,。無(wú)寬度可以用一下代碼，如果是有寬度,，則可以設(shè)置margin-left負(fù)值為容器寬度的一半,。

.parent{position: relative;}
.child{position: absolute; left: 50%; transform: translateX(-50%);}
1
2

       優(yōu)勢(shì)：無(wú)需設(shè)置容器寬度，在移動(dòng)端可以使用
       劣勢(shì)：兼容性差,，需要IE9及以上瀏覽器的支持

4.使用flex布局來(lái)實(shí)現(xiàn)

       flex有兩種方法來(lái)實(shí)現(xiàn)水平居中,，父容器設(shè)置display：flex， 一種直接在父容器中設(shè)置justify-content屬性值center,。第二種在子容器中使用margin： 0 auto

.parent{display: flex; justify-content: center;}
1

.parent{display: flex;}
.child{margin: 0 auto;}
1
2

       優(yōu)勢(shì)：實(shí)現(xiàn)起來(lái)簡(jiǎn)單,，尤其是使用在響應(yīng)式布局中
       劣勢(shì)：兼容性差，如果大面積的使用該布局可能會(huì)影響效率

垂直居中

這邊說(shuō)的垂直居中是子容器無(wú)高的垂直居中,，并非單行文本垂直居中l(wèi)ine-height

1.使用絕對(duì)定位absolute來(lái)實(shí)現(xiàn)（同水平居中的使用方法,，優(yōu)劣一樣）

.parent{position: relative;}
.child{position: absolute; top: 50%; transform: translateY(-50%);}
1
2

2.使用flex來(lái)實(shí)現(xiàn)

.parent{display: flex; align-items: center;}
1

3.使用display：table-cell來(lái)實(shí)現(xiàn)

.parent{display: table-cell;vertical-align: middle;height: 400px;}
1

       總結(jié)：將水平居中和垂直居中兩種布局方法相互的結(jié)合起來(lái)就可以實(shí)現(xiàn)水平居中布局。這邊只舉一個(gè)用絕對(duì)定位來(lái)實(shí)現(xiàn)水平垂直居中布局的方法,，別的方法大家可以嘗試自己練習(xí),。（以下介紹各種布局時(shí)都是基于上面水平和垂直居中的方法，所有對(duì)于它們的優(yōu)劣就不再分析,。）

.parent{position: relative;}
.child{position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);}
1
2

多列布局

多列布局也是非常常見(jiàn)的,，適用于一側(cè)定寬，另一側(cè)自適應(yīng)的布局,。

浮動(dòng)布局

       前段時(shí)間我總結(jié)過(guò)關(guān)于兩列浮動(dòng)布局方法,，這里我就不再?gòu)男驴偨Y(jié)了，如果有興趣的朋友可以參考前端時(shí)間關(guān)于浮動(dòng)布局的方法（總結(jié)）這篇博客,。

多列等分布局

多列等分布局常常出現(xiàn)在內(nèi)容中,，多數(shù)為同功能、同階級(jí)內(nèi)容的并排顯示,。

HTML代碼

<div class="parent">
    <div class="column">1</div>
    <div class="column">2</div>
    <div class="column">3</div>
    <div class="column">4</div>
</div>
1
2
3
4
5
6

1.使用flex來(lái)實(shí)現(xiàn)多列布局

.parent{display: flex;}
.column{flex: 1;}
.column+ .column{margin-left: 20px;}
1
2
3

2.使用table來(lái)實(shí)現(xiàn)多列布局

.parent{display: table; ; width: 100%;}
.column{display: table-cell; padding-left: 20px;}
1
2

3.使用float來(lái)實(shí)現(xiàn)多列布局

.column{float: left; width: 25%; padding-left: 20px; box-sizing: border-box;}
1

       提示：使用table和float實(shí)現(xiàn)多列布局的時(shí)候需要注意,，如果要設(shè)置背景顏色則必須將.column盒子作為父容器在其里面添加一個(gè)子容器，在設(shè)置背景顏色,，如果直接在.column容器中設(shè)置背景顏色會(huì)由于padding而無(wú)法產(chǎn)生盒子之間的間距,。

九宮格布局

HTML代碼

<div class="parent">
    <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>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

1.使用flex來(lái)實(shí)現(xiàn)九宮格布局

.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;}
1
2
3

2.使用table來(lái)實(shí)現(xiàn)九宮格布局

.parent{display: table; ; width: 100%;}
.row{display: table-row;}
.item{display: table-cell; width: 33.3%; height: 200px; border: 1px solid red;}
1
2
3

全屏布局

HTML代碼

<div class="parent">
    <div class="top"></div>
    <div class="left"></div>
    <div class="right"></div>
    <div class="bottom"></div>
</div>
1
2
3
4
5
6

使用絕對(duì)定位實(shí)現(xiàn)全屏布局

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;}
1
2
3
4
5

響應(yīng)式布局

meta標(biāo)簽的使用

<meta name="viewport" content="width=device-width, initial-scale=1"/>
1

使用媒體查詢

@media screen and (max-width: 480px){
         /*屏幕小于480px的樣式*/
}
1
2
3

       總結(jié)：這些布局方法有些經(jīng)常用到，有些由于兼容性的問(wèn)題在具體項(xiàng)目相中使用的情況相對(duì)較少,，不過(guò)對(duì)于移動(dòng)端來(lái)說(shuō),，以上總結(jié)的布局都是實(shí)用。今天特意花些時(shí)間來(lái)整理這些布局,，一是為了鞏固知識(shí),，二是希望這些方法能夠分享給前端的初學(xué)者，讓他們對(duì)布局有更深入的了解,，當(dāng)然這些并非是CSS中的所有布局方法,，以后發(fā)現(xiàn)有什么布局沒(méi)有總結(jié)到的，我會(huì)繼續(xù)更新,、分享,，如果哪位同行對(duì)布局方法有所補(bǔ)充，或者發(fā)現(xiàn)博客中存在問(wèn)題,，歡迎相互交流,。