常见 CSS 布局
水平垂直居中
/* 公共代碼 */ <div class="wp"><div class="box size">123123</div> </div>居中元素定寬高
absolute + 負(fù) margin
.wp {border: 1px solid red;width: 300px;height: 300px;position: relative; } .box {background: green; width: 100px;height: 100px;position: absolute;top: 50%;left: 50%;margin-left: -50px;margin-top: -50px; }absolute + margin auto
.wp {border: 1px solid red;width: 300px;height: 300px;position: relative; } .box {background: green; width: 100px;height: 100px;position: absolute;top: 0;left: 0;bottom: 0;right: 0;margin: auto; }absolute + calc
.wp {border: 1px solid red;width: 300px;height: 300px;position: relative; } .box {background: green; width: 100px;height: 100px;position: absolute;top: calc(50% - 50px);left: calc(50% - 50px); }居中元素不定寬高
absolute + transform
.wp {border: 1px solid red;width: 300px;height: 300px;position: relative; } .box {background: green; position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%); }line-height + height
.wp {border: 1px solid red;width: 300px;height: 300px;line-height: 300px; /*行高的值與height相等*/text-align: center;font-size: 0; /*消除幽靈空白節(jié)點(diǎn)、近似居中的bug*/ } .box {background: green; display: inline-block; /*如果是塊級(jí)元素需改為行內(nèi)或行內(nèi)塊級(jí)才生效*/vertical-align: middle;font-size: 16px;line-height: initial; /*默認(rèn)值*/text-align: left; /*修正文字*/ }inline-block
.wp {border: 1px solid red;width: 300px;height: 300px;position: relative;display: inline-block;white-space: nowrap;text-align: center; } .wp::after { content:''; display: inline-block; vertical-align: middle; height: 100%; } .box {background: green; display: inline-block; /*如果是塊級(jí)元素需改為行內(nèi)或行內(nèi)塊級(jí)才生效*/vertical-align: middle; }table
tabel 單元格中的內(nèi)容天然就是垂直居中的，需添加一個(gè)水平居中屬性即可，該方法代碼太冗余
table-cell： CSS 新增的 table 屬性，可把普通元素變?yōu)?table 元素的現(xiàn)實(shí)效果，該方法和table一樣原理，但沒(méi)有那么多冗余代碼，兼容性也還不錯(cuò)
.wp {display: table-cell;vertical-align: middle;text-align: center;border: 1px solid red;width: 300px;height: 300px; } .box {background: green; display: inline-block; }flex： 注意兼容性
.wp {display: flex;justify-content: center;align-items: center;border: 1px solid red;width: 300px;height: 300px; } .box {background: green; }grid： 網(wǎng)格布局，代碼量也很少，但兼容性不如 flex
.wp {display: grid;border: 1px solid red;width: 300px;height: 300px; } .box {background: green; align-self: center;justify-self: center; }writing-mode： 可以改變文字的顯示方向，如可通過(guò) writing-mode 讓文字的顯示變?yōu)榇怪狈较?#xff0c;結(jié)合 text-align 可實(shí)現(xiàn)
<div class="wp"><div class="wp-inner"><div class="box">123123</div></div> </div>wp {writing-mode: vertical-lr;text-align: center;border: 1px solid red;width: 300px;height: 300px; } .wp-inner {writing-mode: horizontal-tb;display: inline-block;width: 100%; } .box {background: green; display: inline-block; }兩列布局
左列定寬，右列自適應(yīng)
float + margin
<div class="left">左列定寬</div> <div class="right">右列自適應(yīng)</div>.left {background-color: red;float: left;width: 100px;height: 500px; } .right {background-color: yellow;height: 500px;margin-left: 100px; /*大于等于 left 的寬度*/ }float + margin(fix)
<div class="left">左列定寬</div> <div class="right-fix"><div class="right">右列自適應(yīng)</div> </div>.left {background-color: red;float: left;width: 100px;height: 500px; } .right-fix {float: right;width: 100%;margin-left: -100px; /*正值大于或等于 left 的寬度，才能顯示在同一行*/ } .right {background-color: yellow;height: 500px;margin-left: 100px; /*大于等于 left 的寬度*/ }float + overflow
優(yōu)點(diǎn)：代碼簡(jiǎn)單，容易理解，無(wú)需關(guān)注定寬的寬度，利用 bfc 達(dá)到自適應(yīng)效果
缺點(diǎn)：浮動(dòng)脫離文檔流，需要手動(dòng)清除浮動(dòng)，否則容易產(chǎn)生高度塌陷；不支持ie6
絕對(duì)定位
<div class="parent"><div class="left">左列定寬</div><div class="right">右列自適應(yīng)</div> </div>.parent {position: relative; /*子絕父相*/ } .left {background-color: red;position: absolute;top: 0;left: 0;width: 100px;height: 500px; } .right {background-color: yellow;height: 500px;position: absolute;top: 0;left: 100px; /*值大于等于 left 的寬度*/right: 0; }flex
<div class="parent"><div class="left">左列定寬</div><div class="right">右列自適應(yīng)</div> </div>.parent {width: 100%;height: 500px;display: flex; } .left {width: 100px;background-color: red; } .right {background-color: yellow;flex: 1; /*均分了父元素剩余空間*/ }table
優(yōu)點(diǎn)：代碼簡(jiǎn)單，容易理解，無(wú)需關(guān)注定寬的寬度，利用單元格自動(dòng)分配達(dá)到自適應(yīng)效果
缺點(diǎn)：margin失效；設(shè)置間隔比較麻煩；不支持ie8-
Grid
<div class="parent"><div class="left">左列定寬</div><div class="right">右列自適應(yīng)</div> </div>.parent {width: 100%;height: 500px;display: grid;grid-template-columns: 100px auto; /*設(shè)定 2 列就 ok 了，auto 換成 1fr 也行*/ } .left {background-color: red; } .right {background-color: yellow; }左列自適應(yīng)，右列定寬
float + margin
<div class="parent"><div class="left">左列自適應(yīng)</div><div class="right">右列定寬</div> </div>.parent {padding-left: 100px; /*抵消 left 的 margin-left 以達(dá)到 parent 水平居中*/ } .left {width: 100%;height: 500px;float: left;margin-left: -100px; /*正值等于 right 的寬度*/background-color: #f00; } .right {height: 500px;width: 100px;float: right;background-color: #0f0; }float + overflow
<div class="parent"><div class="right">右列定寬</div><div class="left">左列自適應(yīng)</div> <!--順序要換一下--> </div>.left {background-color: #f00;overflow: hidden; /*觸發(fā)bfc*/height: 500px; } .right {height: 500px;width: 100px;float: right;background-color: #0f0; }其他的方法如絕對(duì)定位、flex、table、grid 與【左列定寬右列自適應(yīng)】相反
一列不定寬，一列自適應(yīng)（盒子寬度隨著內(nèi)容增加或減少發(fā)生變化,另一個(gè)盒子自適應(yīng)）
改變前
改變后
float + overflow
<div class="parent"><div class="left">左列不定寬</div><div class="right">右列自適應(yīng)</div> </div>.left {margin-right: 10px;float: left; /*只設(shè)置浮動(dòng),不設(shè)寬度*/height: 500px;background-color: #f00; } .right {overflow: hidden; /*觸發(fā) bfc */height: 500px;background-color: #0f0; }flex
<div class="parent"><div class="left">左列不定寬</div><div class="right">右列自適應(yīng)</div> </div>.parent{display: flex; } .left { /*不設(shè)寬度*/margin-right: 10px;height: 500px;background-color: #f00; } .right {height: 500px;background-color: #0f0;flex: 1; /*均分 parent 剩余的部分*/ }Grid
<div class="parent"><div class="left">左列不定寬</div><div class="right">右列自適應(yīng)</div> </div>.parent{display: grid;grid-template-columns: auto 1fr; /* auto 和 1fr 換一下順序就是左列自適應(yīng)，右列不定寬了*/ } .left {margin-right: 10px;height: 500px;background-color: red; } .right {height: 500px; }三列布局
兩列定寬，一列自適應(yīng)
float + margin
<div class="parent"><div class="left">左列定寬</div><div class="center">中間定寬</div><div class="right">右列自適應(yīng)</div> </div>.parent {min-width: 310px; /* 100+10+200，防止寬度不夠，子元素?fù)Q行*/ } .left {margin-right: 10px; /* left 和 center 間隔*/float: left;width: 100px;height: 500px;background-color: red; } .center {float: left;width: 200px;height: 500px;background-color: green; } .right {margin-left: 320px; /*等于 left 和 center 的寬度之和加上間隔，多出來(lái)的就是 right 和 center 的間隔*/height: 500px;background-color: #0f0; }float + overflow
<div class="parent"><div class="left">左列定寬</div><div class="center">中間定寬</div><div class="right">右列自適應(yīng)</div> </div>.parent{min-width: 320px; /* 100+10+200+10，防止寬度不夠，子元素?fù)Q行*/ } .left {margin-right: 10px; /* left 和 center 間隔*/float: left;width: 100px;height: 500px;background-color: red; } .center {float: left;width: 200px;height: 500px;background-color: green;margin-right: 10px; /*在此定義和 right 的間隔*/ } .right {overflow: hidden; /*觸發(fā) bfc*/height: 500px;background-color: yellow; }flex
<div class="parent"><div class="left">左列定寬</div><div class="center">中間定寬</div><div class="right">右列自適應(yīng)</div> </div>.parent{height: 500px;display: flex; } .left {margin-right: 10px; /* left 和 center 間隔*/width: 100px;background-color: red; } .center {width: 200px;background-color: green;margin-right: 10px; /*在此定義和 right 的間隔*/ } .right { flex: 1; /*均分 parent 剩余的部分達(dá)到自適應(yīng)*/background-color: yellow; }table
<div class="parent"><div class="left">左列定寬</div><div class="center">中間定寬</div><div class="right">右列自適應(yīng)</div> </div>.parent{width: 100%; display: table;height: 520px; /*抵消上下間距 10*2 的高度影響*/margin: -10px 0; /*抵消上下間距 10 的位置影響*//*左右兩邊間距大了一點(diǎn)，子元素改用 padding 設(shè)置盒子間距就沒(méi)有這個(gè)問(wèn)題*/border-spacing: 10px; /*以下子元素 margin 設(shè)置間距失效，關(guān)鍵!!!設(shè)置間距*/ } .left {display: table-cell;width: 100px;background-color: red; } .center {width: 200px;background-color: green;display: table-cell; } .right { display: table-cell;background-color: yellow; }Grid
<div class="parent"><div class="left">左列定寬</div><div class="center">中間定寬</div><div class="right">右列自適應(yīng)</div> </div>.parent{height: 500px;display: grid;grid-template-columns: 100px 200px auto; /*設(shè)置 3 列，固定第一第二列的寬度，第三列 auto 或者 1fr*/ } .left {margin-right: 10px; /*間距*/background-color: red; } .center {margin-right: 10px; /*間距*/background-color: green; } .right { background-color: yellow; }兩側(cè)定寬，中間自適應(yīng)
** 圣杯布局**
利用浮動(dòng)和相對(duì)定位實(shí)現(xiàn)
缺點(diǎn)：圣杯布局會(huì)有個(gè)問(wèn)題，當(dāng)將瀏覽器寬度縮短到一定程度時(shí)會(huì)使得中間子元素的寬度比左右子元素寬度小，這時(shí)布局就會(huì)出現(xiàn)問(wèn)題，所以在使用圣杯布局時(shí)一定要設(shè)置整個(gè)容器的最小寬度
雙飛翼布局
為了解決圣杯布局的弊端，實(shí)現(xiàn)中間部分自適應(yīng)時(shí)多嵌套了一個(gè) div 且不再使用相對(duì)定位
<div class="header">header</div> <div class="parent"><!--#center需要放在前面--><div class="center"><div class="center_inner">中間自適應(yīng)</div><hr> <!--方便觀察原理--></div><div class="left">左列定寬</div><div class="right">右列定寬</div> </div> <div class="footer">footer</div>.header, .footer {height: 60px;background-color: #ccc; }.parent, .parent div {height: 300px }.left, .center, .right {float: left; }.left {margin-left: -100%; /*使 left 上去一行*/background-color: red;width: 100px; }.center {width: 100%;border: 1px solid #000;background-color: yellow; }.center_inner {height: 280px;border: 1px solid #000;margin: 0 220px 0 120px; /*關(guān)鍵!!!左右邊界等于左右盒子的寬度，多出來(lái)的為盒子間隔*/ }.right {width: 200px;margin-left: -200px; /*使 right 上去一行*/background-color: green; }flex
flex: flex-grow | flex-shrink | flex-basis; 分別為：空間充足放大比,空間不足縮小比以及計(jì)算剩余空間之前的寬度值
<div class="parent"><div class="left">左列定寬</div><div class="center">中間自適應(yīng)</div><div class="right">右列定寬</div> </div>.parent {display: flex; }.parent div {height: 300px; }.left, .right {width: 200px; /* flex: 0 0 200px; */ }.left {background-color: red; }.center {flex: 1;background-color: yellow; }.right {background-color: green; }position
優(yōu)點(diǎn)：容易理解，兼容性比較好
缺點(diǎn)：需手動(dòng)計(jì)算寬度確定邊距；脫離文檔流；代碼繁多
table
優(yōu)點(diǎn)：代碼簡(jiǎn)潔，容易理解；
缺點(diǎn)：margin失效，采用border-spacing表格兩邊的間隔無(wú)法消除；不支持ie8-
Grid
Grid 是微軟提出的網(wǎng)頁(yè)布局解決方案，最新的 Safari、Chrome、Firefox 都已經(jīng)進(jìn)行了支持。個(gè)人感覺(jué) Grid 布局比 flex 布局更強(qiáng)大一些，寬高兩個(gè)方向上都可以得到控制且 Grid 也更容易理解（但 Grid 在移動(dòng)端的支持應(yīng)該沒(méi)有 flex 強(qiáng)）
<div class="parent"><div class="left">左列定寬</div><div class="center">中間自適應(yīng)</div><div class="right">右列定寬</div> </div>.parent {display: grid;grid-template-columns: 200px auto 200px;grid-template-rows: 100px }.left {background-color: red; }.center {background-color: yellow; }.right {background-color: green; } <div class="parent"><div class="header"></div><div class="left">左列定寬</div><div class="center">中間自適應(yīng)<hr /></div><div class="right">右列定寬</div><div class="footer"></div> </div>.parent {height: 500px;display: grid;grid-template-columns: 100px auto 200px; /*設(shè)定3列*/grid-template-rows: 60px auto 60px; /*設(shè)定3行*//*設(shè)置網(wǎng)格區(qū)域分布*/grid-template-areas:"header header header""leftside main rightside""footer footer footer"; }.header,.footer {background-color: #ccc; }.header {grid-area: header; /*指定在哪個(gè)網(wǎng)格區(qū)域*/ }.left {grid-area: leftside;background-color: red; }.center {grid-area: main; /*指定在哪個(gè)網(wǎng)格區(qū)域*/margin: 0 15px; /*設(shè)置間隔*/border: 1px solid #000;background-color: yellow; }.right {grid-area: rightside; /*指定在哪個(gè)網(wǎng)格區(qū)域*/background-color: green; }.footer {grid-area: footer; /*指定在哪個(gè)網(wǎng)格區(qū)域*/ }**CSS3 的 calc **
CSS3 提供的 calc 功能能夠?qū)崿F(xiàn)給寬高等設(shè)置動(dòng)態(tài)的值，支持 + - * / 四則運(yùn)算，注意運(yùn)算符兩邊要個(gè)留一個(gè)空格否則設(shè)置無(wú)效
同樣需要設(shè)置浮動(dòng)將三個(gè)元素并排顯示
多列布局
多列等寬布局
float
優(yōu)點(diǎn)：代碼簡(jiǎn)單，容易理解；兼容性較好
缺點(diǎn)：需要手動(dòng)清除浮動(dòng)，否則會(huì)容易產(chǎn)生高度塌陷
flex
<div class="parent"><div class="column">等寬等寬等寬等寬等寬等寬等寬等寬等寬等寬</div><div class="column">等寬等寬等寬等寬等寬等寬等寬等寬等寬等寬</div><div class="column">等寬等寬等寬等寬等寬等寬等寬等寬等寬等寬</div><div class="column">等寬等寬等寬等寬等寬等寬等寬等寬等寬等寬</div> </div>.parent {margin-left: -15px; /*使內(nèi)容看起來(lái)居中*/height: 500px;display: flex; }.column {flex: 1; /*一起平分 parent*/margin-left: 15px; /*設(shè)置間距*/ }.column:nth-child(odd) {background-color: red; } .column:nth-child(even) {background-color: green; }table
<div class="parent"><div class="column">等寬等寬等寬等寬等寬等寬等寬等寬等寬等寬</div><div class="column">等寬等寬等寬等寬等寬等寬等寬等寬等寬等寬</div><div class="column">等寬等寬等寬等寬等寬等寬等寬等寬等寬等寬</div><div class="column">等寬等寬等寬等寬等寬等寬等寬等寬等寬等寬</div> </div>.parent {height: 500px; display: table; margin: -20px 0; /*抵消上下邊 20*2 間距的位置影響*//*兩邊離頁(yè)面間距較大，改用子元素設(shè)置 padding 來(lái)當(dāng)成間隔就不會(huì)有這樣的問(wèn)題*/border-spacing: 20px; /*設(shè)置間距*/ }.column {display: table-cell; }.column:nth-child(odd) {background-color: red; }.column:nth-child(even) {background-color: green; }Grid
<div class="parent"><div class="column">等寬等寬等寬等寬等寬等寬等寬等寬等寬等寬</div><div class="column">等寬等寬等寬等寬等寬等寬等寬等寬等寬等寬</div><div class="column">等寬等寬等寬等寬等寬等寬等寬等寬等寬等寬</div><div class="column">等寬等寬等寬等寬等寬等寬等寬等寬等寬等寬</div> </div>.parent {height: 500px;display: grid;grid-template-columns: repeat(4, 1fr); /*4 就是列數(shù)*/ }.column:nth-child(odd) {background-color: red; }.column:nth-child(even) {background-color: green; }九宮格布局
table
<div class="parent"><div class="row"><div class="item">1</div><div class="item">2</div><div class="item">3</div></div><div class="row"><div class="item">4</div><div class="item">5</div><div class="item">6</div></div><div class="row"><div class="item">7</div><div class="item">8</div><div class="item">9</div></div> </div>.parent {width: 1200px;height: 500px;margin: 0 auto;display: table; }.row {display: table-row; }.item {border: 1px solid #000;display: table-cell; }flex
<div class="parent"><div class="row"><div class="item">1</div><div class="item">2</div><div class="item">3</div></div><div class="row"><div class="item">4</div><div class="item">5</div><div class="item">6</div></div><div class="row"><div class="item">7</div><div class="item">8</div><div class="item">9</div></div> </div>.parent {width: 1200px;height: 500px;margin: 0 auto;display: flex;flex-direction: column; }.row {display: flex;flex: 1; }.item {flex: 1;border: 1px solid #000; }Grid
CSS Grid 非常強(qiáng)大，可以實(shí)現(xiàn)各種各樣的三維布局
<div class="parent"><div class="item">1</div><div class="item">2</div><div class="item">3</div><div class="item">4</div><div class="item">5</div><div class="item">6</div><div class="item">7</div><div class="item">8</div><div class="item">9</div> </div>.parent {width: 1200px;height: 500px;margin: 0 auto;display: grid;grid-template-columns: repeat(3, 1fr); /*等同于1fr 1fr 1fr，此為重復(fù)的合并寫(xiě)法*/grid-template-rows: repeat(3, 1fr); /*等同于1fr 1fr 1fr，此為重復(fù)的合并寫(xiě)法*/ }.item {border: 1px solid #000; }柵格系統(tǒng)
優(yōu)點(diǎn)：代碼簡(jiǎn)潔，容易理解；提高頁(yè)面內(nèi)容的流動(dòng)性，能適應(yīng)多種設(shè)備
Less
/*生成柵格系統(tǒng)*/ @media screen and (max-width: 768px){.generate-columns(12); /*此處設(shè)置生成列數(shù)*/.generate-columns(@n, @i: 1) when (@i <= @n) {.column-xs-@{i} {width: (@i * 100% / @n);}.generate-columns(@n, (@i+1));} } @media screen and (min-width: 768px){.generate-columns(12); /*此處設(shè)置生成列數(shù)*/.generate-columns(@n, @i: 1) when (@i <= @n) {.column-sm-@{i} {width: (@i * 100% / @n);}.generate-columns(@n, (@i+1));} } div[class^="column-xs-"]{float: left; } div[class^="column-sm-"]{float: left; }編譯后的 CSS 代碼
@media screen and (max-width: 768px) {.column-xs-1 { width: 8.33333333%; }.column-xs-2 { width: 16.66666667%; }.column-xs-3 { width: 25%; }.column-xs-4 { width: 33.33333333%; }.column-xs-5 { width: 41.66666667%; }.column-xs-6 { width: 50%; }.column-xs-7 { width: 58.33333333%; }.column-xs-8 { width: 66.66666667%; }.column-xs-9 { width: 75%; }.column-xs-10 { width: 83.33333333%; }.column-xs-11 { width: 91.66666667%; }.column-xs-12 { width: 100%; } } @media screen and (min-width: 768px) {.column-sm-1 { width: 8.33333333%; }.column-sm-2 { width: 16.66666667%; }.column-sm-3 { width: 25%; }.column-sm-4 { width: 33.33333333%; }.column-sm-5 { width: 41.66666667%; }.column-sm-6 { width: 50%; }.column-sm-7 { width: 58.33333333%; }.column-sm-8 { width: 66.66666667%; }.column-sm-9 { width: 75%; }.column-sm-10 { width: 83.33333333%; }.column-sm-11 { width: 91.66666667%; } .column-sm-12 { width: 100%; } } div[class^="column-xs-"]{float: left; } div[class^="column-sm-"]{float: left; } 《新程序員》：云原生和全面數(shù)字化實(shí)踐50位技術(shù)專(zhuān)家共同創(chuàng)作，文字、視頻、音頻交互閱讀總結(jié)
- 上一篇： 改善前端优化的有用技巧
- 下一篇： element-ui table点击某行