簡(jiǎn)介

布局在我們前端日常開(kāi)發(fā)來(lái)說(shuō)是非常重要的，一個(gè)好的布局能簡(jiǎn)化代碼的同時(shí)還能提高網(wǎng)頁(yè)的性能。常見(jiàn)的布局方法有浮動(dòng)(float)布局、絕對(duì)定位(position)布局、表格布局(table)、彈性(flex)布局、網(wǎng)格(grid)布局。關(guān)于布局方法本文不做詳細(xì)講解，筆者推薦看阮一峰老師 flex布局教程 和阮一峰老師 grid布局教程。

本文主要講解水平垂直居中、單欄布局、雙欄布局、三欄布局一些項(xiàng)目中常用的布局方案。

本文代碼全部使用codepen在線代碼工具進(jìn)行演示。

居中

居中在我們?nèi)粘９ぷ髦羞€是會(huì)經(jīng)常碰到。

水平居中

對(duì)于水平居中一般可以使用如下四種方式

對(duì)于行內(nèi)元素我們可以在父元素上設(shè)置text-align:center;來(lái)實(shí)現(xiàn)。對(duì)于定長(zhǎng)塊級(jí)元素我們可以使用margin: 0 auto;來(lái)實(shí)現(xiàn)。我們可以在父元素上使用flex布局來(lái)實(shí)現(xiàn)。我們可以在父元素上使用grid布局來(lái)實(shí)現(xiàn)。<div class="div1"> <span>行內(nèi)元素水平居中</span></div><div class="div2"> <span>行內(nèi)元素水平居中</span> <div>塊級(jí)元素水平居中</div></div><div class="div3"> <span>行內(nèi)元素水平居中</span> <div>塊級(jí)元素水平居中</div></div><div class="div4">塊級(jí)元素水平居中</div>.div1 { text-align: center;}.div2 { display: flex; justify-content: center;}.div3 { display: grid; justify-content: center;}.div4 { width: 130px; margin: 0 auto;}

效果如下

點(diǎn)擊查看代碼運(yùn)行實(shí)例

垂直居中

對(duì)于垂直居中一般可以使用如下三種方式

我們可以在父元素上設(shè)置line-height等于height來(lái)實(shí)現(xiàn)。我們可以在父元素上使用flex布局來(lái)實(shí)現(xiàn)。我們可以在父元素上使用grid布局來(lái)實(shí)現(xiàn)。我們可以在父元素上使用table布局來(lái)實(shí)現(xiàn)。<div class="div1"> <span>行內(nèi)元素垂直居中</span><!-- <div>塊級(jí)元素垂直居中</div> --></div><div class="div2"> <span>行內(nèi)元素垂直居中</span> <div>塊級(jí)元素垂直居中</div></div><div class="div3"> <span>行內(nèi)元素垂直居中</span> <div>塊級(jí)元素垂直居中</div></div><div class="div4"> <span>行內(nèi)元素垂直居中</span> <div>塊級(jí)元素垂直居中</div></div>.div1 { height: 100px; background: lightgreen; line-height: 100px;}.div2 { height: 100px; background: lightblue; display: flex; align-items: center;}.div3 { height: 100px; background: lightgreen; display: grid; align-content: center;}.div4 { height: 100px; background: lightblue; display: table-cell; vertical-align: middle;}

效果如下

點(diǎn)擊查看代碼運(yùn)行實(shí)例

水平垂直同時(shí)居中

比如我們想實(shí)現(xiàn)如下水平垂直同時(shí)居中的效果

實(shí)現(xiàn)水平垂直同時(shí)居中我們可以使用絕對(duì)定位、table布局、flex布局 或 grid布局來(lái)實(shí)現(xiàn)。

首先我們創(chuàng)建一個(gè)需要居中的盒子。

<div class="box"></div>純絕對(duì)定位.box { position: absolute; width: 200px; height: 100px; background: red; top: 0; left: 0; right: 0; bottom: 0; margin: auto;}

點(diǎn)擊查看代碼運(yùn)行實(shí)例

絕對(duì)定位加負(fù)外邊距

這種方式需要知道居中元素的具體寬高，不然負(fù)的margin沒(méi)法設(shè)置。

.box { position: absolute; width: 200px; height: 100px; background: red; left: 50%; top: 50%; margin-left: -100px; margin-top: -50px;}

點(diǎn)擊查看代碼運(yùn)行實(shí)例

絕對(duì)定位加平移

這種平移的方式就不需要考慮居中盒子的具體寬高了。

.box { position: absolute; width: 200px; height: 100px; background: red; left: 50%; top: 50%; transform: translate(-50%, -50%);}

點(diǎn)擊查看代碼運(yùn)行實(shí)例

使用flex實(shí)現(xiàn)html,body { height: 100%; }body { background: gray; display: flex; align-items: center; justify-content: center;}.box { width: 200px; height: 100px; background: red;}

點(diǎn)擊查看代碼運(yùn)行實(shí)例

使用grid實(shí)現(xiàn)html,body { height: 100%; }body { background: gray; display: grid;/* align-content: center; justify-content: center; */ /* align-content和justify-content的簡(jiǎn)寫 */ place-content: center;}.box { width: 200px; height: 100px; background: red;}

點(diǎn)擊查看代碼運(yùn)行實(shí)例

使用table加外邊距實(shí)現(xiàn)

使用table布局需要注意如下

display: table時(shí)padding會(huì)失效display: table-row時(shí)margin、padding同時(shí)失效display: table-cell時(shí)margin會(huì)失效<div class="box"> <div class="child"></div></div>.box { background: red; height: 300px; width: 600px; display: table-cell; vertical-align: middle;}.child { width: 200px; height: 200px; background: lightgreen; margin: 0 auto;}

點(diǎn)擊查看代碼運(yùn)行實(shí)例

單欄布局

單欄布局我們常用在網(wǎng)頁(yè)框架上，一般我們把網(wǎng)頁(yè)分為 header、content、footer三部分。

在不同的項(xiàng)目我們可能對(duì)這三部分的樣式需求有所差別，比如需要頂部固定、需要底部固定等等。

頂?shù)撞慷疾还潭?p >比如想實(shí)現(xiàn)如下效果，footer在內(nèi)容不足的時(shí)候吸附在窗口底部，當(dāng)內(nèi)容多的時(shí)候又可以被抵到窗口下面。

使用padding加負(fù)margin實(shí)現(xiàn)<div class="wrap"> <div class="header">header</div> <div class="content">content</div></div><div class="footer">footer</div>html, body { height: 100%; margin: 0;}.wrap { min-height: 100%; padding-bottom: 50px; overflow: auto; box-sizing: border-box;}.header { height: 50px; background: lightblue;}.content { background: lightpink; /* 這里的高度只是為了模擬內(nèi)容多少 */ height: 100px; /* height: 1000px; */}.footer { height: 50px; background: lightgreen; margin-top: -50px;}

點(diǎn)擊查看代碼運(yùn)行實(shí)例

使用flex實(shí)現(xiàn)<div class="wrap"> <div class="header">header</div> <div class="content">content</div> <div class="footer">footer</div></div>html, body { height: 100%; margin: 0;}.wrap { display: flex; flex-direction: column; min-height: 100%;}.header { height: 50px; background: lightblue;}.content { background: lightpink; /* 這里的高度只是為了模擬內(nèi)容多少 */ height: 100px; /* height: 1000px; */ flex-grow: 1;}.footer { height: 50px; background: lightgreen;}

點(diǎn)擊查看代碼運(yùn)行實(shí)例

頂部固定使用padding加負(fù)margin加fixed實(shí)現(xiàn)頂部固定布局<div class="header">header</div><div class="wrap"> <div class="content">content</div></div><div class="footer">footer</div>html, body { height: 100%; margin: 0;}.header { height: 50px; background: lightblue; position: fixed; width: 100%;}.wrap { min-height: 100%; padding-bottom: 50px; overflow: auto; box-sizing: border-box;}.content { margin-top: 50px; background: lightpink; /* 這里的高度只是為了模擬內(nèi)容多少 */ height: 100px; /* height: 1000px; */}.footer { height: 50px; background: lightgreen; margin-top: -50px;}

點(diǎn)擊查看代碼運(yùn)行實(shí)例

使用flex加fixed定位實(shí)現(xiàn)<div class="wrap"> <div class="header">header</div> <div class="content">content</div> <div class="footer">footer</div></div>html, body { height: 100%; margin: 0;}.wrap { display: flex; min-height: 100%; flex-direction:column;}.header { height: 50px; background: lightblue; position: fixed; width: 100%;}.content { background: lightpink; /* 這里的高度只是為了模擬內(nèi)容多少 */ /* height: 100px; */ height: 1000px; margin-top: 50px; flex-grow: 1;}.footer { height: 50px; background: lightgreen;}

點(diǎn)擊查看代碼運(yùn)行實(shí)例

底部固定使用padding加負(fù)margin實(shí)現(xiàn)底部固定布局<div class="wrap"> <div class="header">header</div> <div class="content">content</div></div><div class="footer">footer</div>html, body { height: 100%; margin: 0;}.wrap { height: 100%; padding-bottom: 50px; overflow: auto; box-sizing: border-box;}.header { height: 50px; background: lightblue;}.content { background: lightpink; height: 100px; height: 1000px;}.footer { height: 50px; background: lightgreen; margin-top: -50px;}

點(diǎn)擊查看代碼運(yùn)行實(shí)例

使用flex加fixed定位實(shí)現(xiàn)<div class="wrap"> <div class="header">header</div> <div class="content">content</div> <div class="footer">footer</div></div>html, body { height: 100%; margin: 0;}.wrap { display: flex; min-height: 100%; flex-direction:column;}.header { height: 50px; background: lightblue;}.content { background: lightpink; /* 這里的高度只是為了模擬內(nèi)容多少 */ /* height: 100px; */ height: 1000px; flex-grow: 1; margin-bottom: 50px;}.footer { height: 50px; background: lightgreen; position: fixed; width: 100%; bottom: 0;}

點(diǎn)擊查看代碼運(yùn)行實(shí)例

頂?shù)撞慷脊潭ㄊ褂胒ixed實(shí)現(xiàn)頂?shù)撞抗潭ú季?lt;div class="header">header</div><div class="content">content</div><div class="footer">footer</div>復(fù)制代碼html, body { height: 100%; margin: 0;}.header { height: 50px; background: lightblue; position: fixed; width: 100%;}.content { background: lightpink; padding-top: 50px; padding-bottom: 50px; /* height: 100px; */ height: 1000px;}.footer { height: 50px; background: lightgreen; position: fixed; bottom: 0; width: 100%;}

點(diǎn)擊查看代碼運(yùn)行實(shí)例

使用flex加fixed定位實(shí)現(xiàn)<div class="wrap"> <div class="header">header</div> <div class="content">content</div> <div class="footer">footer</div></div>html, body { height: 100%; margin: 0;}.wrap { display: flex; min-height: 100%; flex-direction:column;}.header { height: 50px; background: lightblue; position: fixed; width: 100%;}.content { background: lightpink; /* 這里的高度只是為了模擬內(nèi)容多少 */ /* height: 100px; */ height: 1000px; flex-grow: 1; margin-bottom: 50px; margin-top: 50px;}.footer { height: 50px; background: lightgreen; position: fixed; width: 100%; bottom: 0;}

點(diǎn)擊查看代碼運(yùn)行實(shí)例

兩欄布局

兩欄布局就是一邊固定，另外一邊自適應(yīng)，效果如下

實(shí)現(xiàn)兩欄布局的方法也有很多，筆者接下來(lái)介紹用的比較多的幾種方式。

左 float，然后右 margin-left（右邊自適應(yīng)）<div class="aside"></div><div class="main"></div>div { height: 500px;}.aside { width: 300px; float: left; background: yellow;}.main { background: aqua; margin-left: 300px;}

點(diǎn)擊查看代碼運(yùn)行實(shí)例

右 float，然后右 margin-right（左邊自適應(yīng)）<div class="aside"></div><div class="main"></div>div { height: 500px;}.aside { width: 300px; float: right; background: yellow;}.main { background: aqua; margin-right: 300px;}

點(diǎn)擊查看代碼運(yùn)行實(shí)例

absolute定位加margin-left（右邊自適應(yīng)）<div class="wrap"> <div class="aside"></div> <div class="main"></div></div>div { height: 500px;}.wrap { position: relative;}.aside { width: 300px; background: yellow; position: absolute;}.main { background: aqua; margin-left: 300px;}

點(diǎn)擊查看代碼運(yùn)行實(shí)例

absolute定位加margin-right（左邊自適應(yīng)）<div class="wrap"> <div class="aside"></div> <div class="main"></div></div>div { height: 500px;}.wrap { position: relative;}.aside { width: 300px; background: yellow; position: absolute; right: 0;}.main { background: aqua; margin-right: 300px;}

點(diǎn)擊查看代碼運(yùn)行實(shí)例

使用flex實(shí)現(xiàn)<div class="wrap"> <div class="aside"></div> <div class="main"></div></div>div { height: 500px;}.wrap { display: flex;}.aside { flex: 0 0 300px; background: yellow; }.main { background: aqua; flex: 1 1;}

點(diǎn)擊查看代碼運(yùn)行實(shí)例

使用grid實(shí)現(xiàn)<div class="wrap"> <div class="aside"></div> <div class="main"></div></div> height: 500px;}.wrap { display: grid; grid-template-columns: 300px auto;}.aside { background: yellow; }.main { background: aqua;}

點(diǎn)擊查看代碼運(yùn)行實(shí)例

三欄布局

三欄布局就是兩邊固定，中間自適應(yīng)布局，效果如下

實(shí)現(xiàn)三欄布局的方法也有很多，筆者接下來(lái)介紹用的比較多的幾種方式。

position + margin-left + margin-right實(shí)現(xiàn)三欄布局<div class="left"></div><div class="middle"></div><div class="right"></div>html,body { margin: 0;}div { height: 500px;}.left { position: absolute; left: 0; top: 0; width: 200px; background: green;}.right { position: absolute; right: 0; top: 0; width: 200px; background: red;}.middle { margin-left: 200px; margin-right: 200px; background: lightpink;}

點(diǎn)擊查看代碼運(yùn)行實(shí)例

float + margin-left + margin-right實(shí)現(xiàn)三欄布局<div class="left"></div><div class="right"></div><div class="middle"></div>html,body { margin: 0;}div { height: 500px;}.left { width: 200px; background: green; float: left;}.right { width: 200px; background: yellow; float: right;}.middle { margin-left: 200px; margin-right: 200px; background: lightpink;}

點(diǎn)擊查看代碼運(yùn)行實(shí)例

flex實(shí)現(xiàn)三欄布局<div class="wrap"> <div class="left"></div> <div class="middle"></div> <div class="right"></div></div>html,body { margin: 0;}div { height: 500px;}.wrap { display: flex;}.left { flex: 0 0 200px; background: green;}.right { flex: 0 0 200px; background: yellow;}.middle { background: lightpink; flex: 1 1;}

點(diǎn)擊查看代碼運(yùn)行實(shí)例

grid實(shí)現(xiàn)三欄布局<div class="wrap"> <div class="left"></div> <div class="middle"></div> <div class="right"></div></div>html,body { margin: 0;}div { height: 500px;}.wrap { display: grid; grid-template-columns: 200px auto 200px;}.left { background: green;}.right { background: yellow;}.middle { background: lightpink;}

點(diǎn)擊查看代碼運(yùn)行實(shí)例

圣杯布局

圣杯布局在項(xiàng)目中基本上不會(huì)再使用了，在面試中我們會(huì)經(jīng)常碰到，所以需要了解。

主要用到了浮動(dòng)和和相對(duì)定位。

<div class="container"> <div class="content">中間內(nèi)容</div> <div class="left">左側(cè)區(qū)域</div> <div class="right">右側(cè)區(qū)域</div></div>div { height: 500px;}.container { padding: 0 200px 0 200px; border: 1px solid black;}.content { float: left; width: 100%; background: #f00;}.left { width: 200px; background: #0f0; float: left; margin-left: -100%; position: relative; left: -200px;}.right { width: 200px; background: #00f; float: left; margin-left: -200px; position: relative; right: -200px;}

點(diǎn)擊查看代碼運(yùn)行實(shí)例

雙飛翼布局

雙飛翼布局在項(xiàng)目中基本上不會(huì)再使用了，在面試中我們會(huì)經(jīng)常碰到，所以需要了解。

主要用到了浮動(dòng)。

<div class="main"> <div class="content">content</div></div><div class="left">left</div><div class="right">right</div>div { height: 500px;}.main { float: left; width: 100%; background: #f00;}.main .content { /* margin、padding這兩種方式都可以 */ /* margin-left: 200px; margin-right: 300px; */ padding-left: 200px; padding-right: 300px;}.left { width: 200px; background: #0f0; float: left; margin-left: -100%;}.right { width: 200px; background: #00f; float: left; margin-left: -200px;}

點(diǎn)擊查看代碼運(yùn)行實(shí)例

總結(jié)

因?yàn)閒lex和grid布局方法已經(jīng)很強(qiáng)大了，日常工作中99%的布局都可以使用這兩種方式來(lái)實(shí)現(xiàn)。所以筆者建議能使用flex或者grid布局方法實(shí)現(xiàn)的就盡量使用這兩種布局方式實(shí)現(xiàn)。因?yàn)椴粌H簡(jiǎn)單而且負(fù)面作用也很少。

浮動(dòng)布局和絕對(duì)定位布局會(huì)導(dǎo)致元素脫離文檔流，會(huì)帶來(lái)一些負(fù)面作用，有時(shí)會(huì)導(dǎo)致一些意想不到的結(jié)果。

關(guān)于flex布局的兼容性和grid布局的兼容性，目前已經(jīng)支持的很好了，大家可以放心使用。

flex布局的兼容性

grid布局的兼容性

后記

感謝小伙伴們的耐心觀看，本文為筆者個(gè)人學(xué)習(xí)筆記，如有謬誤，還請(qǐng)告知，萬(wàn)分感謝！如果本文對(duì)你有所幫助，還請(qǐng)點(diǎn)個(gè)關(guān)注點(diǎn)個(gè)贊~，您的支持是筆者不斷更新的動(dòng)力！