inline-block總結

inline-block的內部表現相似block，能夠設置寬高，外部表現相似inline，具備不還行的特性。

與float排版有些相似，當內部塊級（可設置寬高），水平排列的時候都二者均可以實現。

二者區別是：

1.  inline-block在普通流中，float脫離普通流；
2.  inline-block默認基線對齊，float元素緊貼頂部；
3.  inline-block包含html空白節點，所以有時候須要處理邊界空白，可是float元素會忽略html空白節點使元素緊貼；

 

查看demo：

HTML代碼：

<div id="wrapper">
<div id="one">one</div>
<div id="two">two</div>
<div id="three">three</div>
<div id="four">four</div>
<div id="five">five</div>
<div id="six">six</div>
</div>

inline-block的CSS代碼：

#wrapper{width: 350px; }
#one{width: 100px;height: 100px; background: #990033}
#two{width: 100px;height: 200px; background: #ff66ff}
#three{width: 100px;height: 100px; background: #660099}
#four{width: 100px;height: 200px; background: #99ccff}
#five{width: 100px;height: 200px; background: #ffffcc}
#six{width: 100px;height: 200px; background: #666633}
#one, #two, #three, #four, #five, #six{display: inline-block;}

效果：

float的CSS代碼：

#wrapper{width: 350px; }
#one{width: 100px;height: 100px; background: #990033}
#two{width: 100px;height: 200px; background: #ff66ff}
#three{width: 100px;height: 100px; background: #660099}
#four{width: 100px;height: 200px; background: #99ccff}
#five{width: 100px;height: 200px; background: #ffffcc}
#six{width: 100px;height: 200px; background: #666633}
#one, #two, #three, #four, #five, #six{float: left;}

 

效果：

下面解決inline-block的空白問題：

1.  父級元素使用```font-size=0```解決
2.  ```letter-space:-N``` px來兼容safari，N的選擇有字體和字號決定，參考列表中的」拜拜了,浮動佈局-基於display:inline-block的列表佈局「

參考

1. inline-block 前世此生
2. 拜拜了,浮動佈局-基於display:inline-block的列表佈局
3. 應不該該使用inline-block代替float