inline-block总结

时间：2015-05-29 08:36:59 阅读：171 评论：0 收藏：0 [点我收藏+]

标签：

inline-block的内部表现类似block，可以设置宽高，外部表现类似inline，具有不还行的特性。

与float排版有些类似，当内部块级（可设置宽高），水平排列的时候都两者都可以实现。

两者区别是：

inline-block在普通流中，float脱离普通流；
inline-block默认基线对齐，float元素紧贴顶部；
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的空白问题：

父级元素使用```font-size=0```解决
```letter-space:-N``` px来兼容safari，N的选择有字体和字号决定，参考列表中的”拜拜了,浮动布局-基于display:inline-block的列表布局“

参考

inline-block 前世今生
拜拜了,浮动布局-基于display:inline-block的列表布局
应不应该使用inline-block代替float

inline-block总结

标签：

原文地址：http://www.cnblogs.com/technology-life/p/4537627.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行