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