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