最近要準(zhǔn)備移動(dòng)端項(xiàng)目，大半年沒(méi)好好寫(xiě)過(guò)CSS了，今天惡補(bǔ)了一下CSS的一些布局，下面做一些分享。

水平居中布局

1.margin + 定寬

<div class="parent"><div class="child">Demo</div>
</div><style>.child {width: 100px;margin: 0 auto;}
</style>

這種常見(jiàn)的寫(xiě)法就不再贅述了。

2. table + margin

<div class="parent"><span class="child">Demo</span>
</div><style>.child {display: table;margin: 0 auto;}
</style>

display: table?在這里的作用有兩個(gè)：一、將span元素轉(zhuǎn)為塊元素性質(zhì)，二、設(shè)置了span寬度為內(nèi)容寬。

*?無(wú)需設(shè)置父元素樣式 （支持 IE 8 及其以上版本），IE 8以下版本需要調(diào)整頁(yè)面結(jié)構(gòu)至?table。

3.inline-block + text-align

<div class="parent"><div class="child">Demo</div>
</div><style>.child {display: inline-block;}.parent {text-align: center;}
</style>

display: inline-block 將div塊元素轉(zhuǎn)為行內(nèi)塊元素性質(zhì)(具備了一些行內(nèi)元素的特性),固給父元素設(shè)置text-align: center 能起到居中效果。

* 兼容性佳（甚至可以兼容 IE 6 和 IE 7）

4. absolute + margin-left

<div class="parent"><div class="child">Demo</div>
</div><style>
.parent {position: relative;}.child {position: absolute;left: 50%;width: 100px;margin-left: -50px;  /* width/2 */}
</style>

*?寬度固定

*?相比于使用transform?，有兼容性更好

5. absolute + transform

<div class="parent"><div class="child">Demo</div>
</div><style>.parent {position: relative;}.child {position: absolute;left: 50%;transform: translateX(-50%);}
</style>

*?transform?為 CSS3 屬性，有兼容性問(wèn)題

注：絕對(duì)定位脫離文檔流，不會(huì)對(duì)后續(xù)元素的布局造成影響

6. flex + justify-content

<div class="parent"><div class="child">Demo</div>
</div><style>.parent {display: flex;justify-content: center;}
</style>

*?只需設(shè)置父節(jié)點(diǎn)屬性，無(wú)需設(shè)置子元素

*?flex布局有兼容性問(wèn)題

垂直居中

1.table-cell + vertical-align

<div class="parent"><div class="child">Demo</div>
</div><style>.parent {display: table-cell;vertical-align: middle;}
</style>

*?兼容性好(IE 8以下版本需要調(diào)整頁(yè)面結(jié)構(gòu)至?table)

2.absolute + transform

<div class="parent"><div class="child">Demo</div>
</div><style>.parent {position: relative;}.child {position: absolute;top: 50%;transform: translateY(-50%);}
</style>

*?transform?為 CSS3 屬性，有兼容性問(wèn)題

*?同水平居中，這也可以用margin-top實(shí)現(xiàn)，原理水平居中

3.flex + align-items

<div class="parent"><div class="child">Demo</div>
</div><style>.parent {display: flex;align-items: center;}
</style>

*?有兼容問(wèn)題

水平垂直居中

1. absolute + transform

<div class="parent"><div class="child">Demo</div>
</div><style>.parent {position: relative;}.child {position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);}
</style>

2. inline-block + text-align + table-cell + vertical-align

<div class="parent"><div class="child">Demo</div>
</div><style>.parent {text-align: center;display: table-cell;vertical-align: middle;}.child {display: inline-block;}
</style>

*?兼容性好

3. flex + justify-content + align-items

<div class="parent"><div class="child">Demo</div>
</div><style>.parent {display: flex;justify-content: center; /* 水平居中 */align-items: center; /*垂直居中*/}
</style>

*?只需設(shè)置父節(jié)點(diǎn)屬性，無(wú)需設(shè)置子元素

*?有兼容性問(wèn)題

一列定寬，一列自適應(yīng)

1.float + margin

<div class="parent"><div class="left"><p>left</p></div><div class="right"><p>right</p></div>
</div><style>.left {float: left;width: 100px;}.right {margin-left: 100px/*間距可再加入 margin-left */}
</style>

*?IE 6 中會(huì)有3像素的 BUG，解決方法可以在?.left?加入?margin-left:-3px?當(dāng)然也有解決這個(gè)小bug的方案如下：

<div class="parent"><div class="left"><p>left</p></div><div class="right-fix"><div class="right"><p>right</p></div></div>
</div><style>.left {float: left;width: 100px;}.right-fix {float: right;width: 100%;margin-left: -100px;}.right {margin-left: 100px/*間距可再加入 margin-left */}
</style>

*?此方法不會(huì)存在 IE 6 中3像素的 BUG，但?.left?不可選擇， 需要設(shè)置?.left {position: relative}?來(lái)提高層級(jí)。 注意此方法增加了不必要的 HTML 文本結(jié)構(gòu)。

2.float + overflow

<div class="parent"><div class="left"><p>left</p></div><div class="right"><p>right</p></div>
</div><style>.left {float: left;width: 100px;}.right {overflow: hidden;}
</style>

*?設(shè)置?overflow: hidden?會(huì)觸發(fā) BFC 模式（Block Formatting Context）塊級(jí)格式上下文。BFC是什么？用通俗的來(lái)講就是，隨便你在BFC 里面干啥，外面都不會(huì)受到影響 。此方法樣式簡(jiǎn)單但不支持 IE 6。

3 .table

  <div class="left"><p>left</p></div><div class="right"><p>right</p></div>
</div><style>.parent {display: table;width: 100%;table-layout: fixed;}.left {display: table-cell;width: 100px;}.right {display: table-cell;/*寬度為剩余寬度*/}
</style>

*?table?的顯示特性為每列的單元格寬度和一定等與表格寬度。?table-layout: fixed?可加速渲染，也是設(shè)定布局優(yōu)先。table-cell?中不可以設(shè)置?margin?但是可以通過(guò)?padding?來(lái)設(shè)置間距。

4. flex

<div class="parent"><div class="left"><p>left</p></div><div class="right"><p>right</p></div>
</div><style>.parent {display: flex;}.left {width: 100px;margin-left: 20px;}.right {flex: 1;}
</style>

*?低版本瀏覽器兼容問(wèn)題

*?性能問(wèn)題，只適合小范圍布局

等分布局

1. float

<div class="parent"><div class="column"><p>1</p></div><div class="column"><p>2</p></div><div class="column"><p>3</p></div><div class="column"><p>4</p></div>
</div>
<style>.parent {margin-left: -20px;}.column {float: left;width: 25%;padding-left: 20px;box-sizing: border-box;}
</style>

*?此方法可以完美兼容 IE8 以上版本。

2. flex

<div class="parent"><div class="column"><p>1</p></div><div class="column"><p>2</p></div><div class="column"><p>3</p></div><div class="column"><p>4</p></div>
</div><style>.parent {display: flex;}.column {flex: 1;}.column+.column { /* 相鄰兄弟選擇器 */margin-left: 20px;}
</style>

*?強(qiáng)大簡(jiǎn)單，有兼容問(wèn)題。

3. table

<div class='parent-fix'><div class="parent"><div class="column"><p>1</p></div><div class="column"><p>2</p></div><div class="column"><p>3</p></div><div class="column"><p>4</p></div></div>
</div><style>.parent-fix {margin-left: -20px;}.parent {display: table;width: 100%;/*可以布局優(yōu)先，也可以單元格寬度平分在沒(méi)有設(shè)置的情況下*/table-layout: fixed;}.column {display: table-cell;padding-left: 20px;}
</style>

等高布局

1.table

table?的特性為每列等寬，每行等高可以用于解決此需求

<div class="parent"><div class="left"><p>left</p></div><div class="right"><p>right</p><p>right</p></div>
</div><style>.parent {display: table;width: 100%;table-layout: fixed;}.left {display: table-cell;width: 100px;}.right {display: table-cell/*寬度為剩余寬度*/}
</style>

2.flex

<div class="parent"><div class="left"><p>left</p></div><div class="right"><p>right</p><p>right</p></div>
</div><style>.parent {display: flex;}.left {width: 100px;margin-left: 20px;}.right {flex: 1;}
</style>

*?注意這里實(shí)際上使用了?align-items: stretch，flex 默認(rèn)的?align-items?的值為?stretch。

3. float

<div class="parent"><div class="left"><p>left</p></div><div class="right"><p>right</p><p>right</p></div>
</div><style>.parent {overflow: hidden;}.left,.right {padding-bottom: 9999px;margin-bottom: -9999px;}.left {float: left;width: 100px;margin-right: 20px;}.right {overflow: hidden;}
</style>

*?此方法為偽等高（只有背景顯示高度相等），左右真實(shí)的高度其實(shí)不相等。?兼容性較好。

?

結(jié)語(yǔ)：?一樣的布局可能有很多種方法實(shí)現(xiàn)，以上只作為參考！

轉(zhuǎn)載于:https://www.cnblogs.com/AllenR/p/7920581.html

總結(jié)

以上是默认站点為你收集整理的CSS常见布局解决方案的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得默认站点網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將默认站点推薦給好友。