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

單列布局

<div class="parent"><div class="child"></div> </div>

• 1
• 2
• 3

• 1
• 2
• 3

水平居中

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

使用margin：0 auto來實現(xiàn)

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

• 1

• 1

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

---

1.使用table來實現(xiàn)

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

• 1

• 1

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

---

2.使用inline-block和text-align來實現(xiàn)

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

• 1
• 2

• 1
• 2

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

---

3.使用絕對定位absolute來實現(xiàn)

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

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

• 1
• 2

• 1
• 2

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

---

4.使用flex布局來實現(xiàn)

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

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

• 1

• 1

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

• 1
• 2

• 1
• 2

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

---

垂直居中

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

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

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

• 1
• 2

• 1
• 2

---

2.使用flex來實現(xiàn)

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

• 1

• 1

3.使用display：table-cell來實現(xiàn)

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

• 1

• 1

---

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

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

• 1
• 2

• 1
• 2

---

多列布局

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

浮動布局

???????前段時間我總結(jié)過關(guān)于兩列浮動布局方法，這里我就不再從新總結(jié)了，如果有興趣的朋友可以參考前端時間關(guān)于浮動布局的方法（總結(jié)）這篇博客。

多列等分布局

多列等分布局常常出現(xiàn)在內(nèi)容中，多數(shù)為同功能、同階級內(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
• 2
• 3
• 4
• 5
• 6

1.使用flex來實現(xiàn)多列布局

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

• 1
• 2
• 3

• 1
• 2
• 3

2.使用table來實現(xiàn)多列布局

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

• 1
• 2

• 1
• 2

3.使用float來實現(xiàn)多列布局

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

• 1

• 1

???????提示：使用table和float實現(xiàn)多列布局的時候需要注意，如果要設(shè)置背景顏色則必須將.column盒子作為父容器在其里面添加一個子容器，在設(shè)置背景顏色，如果直接在.column容器中設(shè)置背景顏色會由于padding而無法產(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
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17

1.使用flex來實現(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

• 1
• 2
• 3

2.使用table來實現(xiàn)九宮格布局

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

• 1
• 2
• 3

• 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

• 1
• 2
• 3
• 4
• 5
• 6

使用絕對定位實現(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

• 1
• 2
• 3
• 4
• 5

響應(yīng)式布局

meta標(biāo)簽的使用

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

• 1

• 1

使用媒體查詢

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

• 1
• 2
• 3

• 1
• 2
• 3

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

總結(jié)

以上是生活随笔為你收集整理的HTML与CSS布局技巧总结的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。