display:inline-block;的神奇用法

为什么要用display:inline-block;

(1)float:left;

浮动布局有局限性，就是每个列表元素的高度必须一致，否则就会错开。

(2)display:inline-block;

具有对内部元素的包裹性，可与文字，图片混排，可内嵌block属性元素。

浮动布局的局限
浮动布局就是指通过使用float属性，让列表元素依次排列的布局。浮动局部的局限性，就是每个列表元素的高度必须要一致，否则就会像是俄罗斯方块一样，“锯齿相错”，例如一个左浮动列表布局，如果第一行有个列表高度高于其他列表，那就在第二行，第一个元素会沿着最高元素的右侧对齐，此原因是属于恶魔系的float属性破坏了inline box。

另外一种布局方式display:inline-block;
（1）display:inline-block;的解释
display:inline-block感觉与display:table-cell有些相似，例如对内部元素的包裹性。但是，由于display:inline-block最大的不同就是其没有父元素的匿名包裹特性，这使得display:inline-block属性的使用非常自由，可与文字，图片混排，可内嵌block属性元素，可以可以置身于inline水平的元素中。
inline-block属性的元素适用于inline box模型，所以，当其中的列表元素高度不一时，是不会有错位的。一言以蔽之，就是每一行所有的inline元素和inline-block元素会共同形成一个line boxes，这个line box的高度由里面最高的元素决定。所以，即使inline-block属性的列表元素高度异常，撑开的是整个line boxes的高度，因而，不会与下一行的列表元素发生错位。

（2）display:inline-block;的使用
如果是inline水平的元素（如a标签，span标签之类）跟上面一样，直接：

{display:inline-block;}

如果是block水平的元素，例如li标签。则需要多点代码，目前我知道的方法有两个，如下所示：

li {display:inline-block;...}
li {display:inline;}

或者是

li{display:inline; zoom:1;}

（3）display:inline-block;的使用中可能存在的问题

inline-block元素间的换行符空格间隙问题

如果inline-block元素间有空格或是换行产生了间隙，那是正常的，应该的。如果没有空格与间隙才是不正常的（IE6/7 block水平元素）。真正的inline-block元素，就像个图片一样。例如，两个不在一行的img标签，形成的两个图片之间就会有间隙。
要让这些空格不出现，最简单的最容易理解的就是让列表的结束标签与下一个列表的开始标签连在一起，就像是：

    ...

    ...

其他解决办法：

{font-size:0;} //设置父对象的文字大小为0px,Chrome下的空格对于font-size:0不起作用

{letter-spaceing:-4px;}  //控制文字间的水平距离，支持负值，让文字水平方向上重叠。##如果元素间本身没有空格##，使用letter-spacing属性是不会发生水平重叠问题的。

{text-align:justify;}  //可实现自动等宽水平排列的列表布局，两端对齐的，不需计算宽度，浏览器自动

案例

<style>
.box{width:50%; padding:20px; margin:20px auto; background-color:#f0f3f9; text-align:justify;}
.list{width:120px; display:inline-block; padding-bottom:20px; text-align:center; vertical-align:top;}
style>
<div class="box">
    <span class="list"><img data-src="http://image1.jpg" />
哇哦，美女，口水，鼻血~~~span>
    <span class="list"><img data-src="http://image2.jpg" />
哇哦，美女，口水，鼻血，不行了，我的小兔乱撞~~span>
div>

总结：

» block水平的元素inline-block化后，IE6/7没有换行符间隙问题，其他浏览器均有；
» inline水平的元素inline-block后，所有主流浏览器都有换行符/空格间隙问题；
» font-size:0，去除换行符间隙，在IE6/7下残留1像素间隙，Chrome浏览器无效，其他浏览器都完美去除；
» letter-spacing负值可以去除所有浏览器的换行符间隙，但是，Opera浏览器下极限是间隙1像素，0像素会反弹，换行符间隙还原。

所以，应用display:inline-block属性实现列表布局的几个关键字就是：block水平的标签，font-size:0和letter-spacing负值。