CSS常見佈局解決方案

提及css佈局，那麼必定得聊聊盒模型，清除浮動，position，display什麼的，但本篇本不是講這些基礎知識的，而是給出各類佈局的解決方案。

水平居中佈局

首先咱們來看看水平居中

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"> <div class="child">Demo</div> </div> <style> .child { display: table; margin: 0 auto; } </style> 

display: table 在表現上相似 block 元素，可是寬度爲內容寬。

• 無需設置父元素樣式 （支持 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> 

• 兼容性佳（甚至能夠兼容 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

強大的absolute對於這種小問題固然也是很簡單的

<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

若是說absolute強大，那flex只是笑笑，由於，他纔是最強的。。。但它有兼容問題

<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> 

• 絕對定位脫離文檔流，不會對後續元素的佈局形成影響。
• transform 爲 CSS3 屬性，有兼容性問題

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> <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> <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 文本結構。

傲嬌的程序員應該放棄過低版本的瀏覽器。（web前端學習交流羣：328058344 禁止閒聊，非喜勿進！）

2.float + overflow

<div class="parent"> <div class="left"> <p>left</p> </div> <div class="right"> <p>right</p> <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="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> 

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> <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> 

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

到此，咱們瞭解常見的佈局解決方案，這些只是參考，同樣的佈局實現方式多種多樣。主要就使用position、flex 、table（從好久好久之前起，咱們就拋棄了table佈局頁面，但display: table;是異常強大）、float等屬性目前flex兼容性較差 傲嬌的程序員應該放棄過低版本的瀏覽器