最近要準備移動端項目，大半年沒好好寫過CSS了，今天惡補了一下CSS的一些布局，下面做一些分享。

水平居中布局

1.margin + 定寬

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

這種常見的寫法就不再贅述了。

2. table + margin

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

display: table?在這里的作用有兩個：一、將span元素轉為塊元素性質，二、設置了span寬度為內容寬。

*?無需設置父元素樣式 （支持 IE 8 及其以上版本），IE 8以下版本需要調整頁面結構至?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塊元素轉為行內塊元素性質(具備了一些行內元素的特性),固給父元素設置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 屬性，有兼容性問題

注：絕對定位脫離文檔流，不會對后續元素的布局造成影響

6. flex + justify-content

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

*?只需設置父節點屬性，無需設置子元素

*?flex布局有兼容性問題

垂直居中

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以下版本需要調整頁面結構至?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 屬性，有兼容性問題

*?同水平居中，這也可以用margin-top實現，原理水平居中

3.flex + align-items

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

*?有兼容問題

水平垂直居中

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>

*?只需設置父節點屬性，無需設置子元素

*?有兼容性問題

一列定寬，一列自適應

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 中會有3像素的 BUG，解決方法可以在?.left?加入?margin-left:-3px?當然也有解決這個小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>

*?此方法不會存在 IE 6 中3像素的 BUG，但?.left?不可選擇， 需要設置?.left {position: relative}?來提高層級。 注意此方法增加了不必要的 HTML 文本結構。

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>

*?設置?overflow: hidden?會觸發 BFC 模式（Block Formatting Context）塊級格式上下文。BFC是什么？用通俗的來講就是，隨便你在BFC 里面干啥，外面都不會受到影響 。此方法樣式簡單但不支持 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?可加速渲染，也是設定布局優先。table-cell?中不可以設置?margin?但是可以通過?padding?來設置間距。

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>

*?低版本瀏覽器兼容問題

*?性能問題，只適合小范圍布局

等分布局

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>

*?強大簡單，有兼容問題。

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%;/*可以布局優先，也可以單元格寬度平分在沒有設置的情況下*/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>

*?注意這里實際上使用了?align-items: stretch，flex 默認的?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>

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

?

結語：?一樣的布局可能有很多種方法實現，以上只作為參考！

轉載于:https://www.cnblogs.com/AllenR/p/7920581.html

總結

以上是生活随笔為你收集整理的CSS常见布局解决方案的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。