关于inline-block布局需要注意几点事项
之前在网上看到一个关于CSS基本布局的一个教学网站，内容很简洁，http://learnlayout.com/。有一小节是讲关于inline-block布局需要注意的几点事项，引用之。
Inline-block : Few things that you need keep in mind
You can also use inline-block for layouts. There are a few things to keep in mind:
•inline-block elements are affected by the vertical-align property, which you probably want set to top
•You need to set the width of each column
•There will be a gap between the columns if there is any whitespace between them in the HTML
翻译过来就是我们使用inline-block元素进行网页布局的时候，需要注意几点
1.inline-block元素受vertical-align属性影响，你可能需要设置成vertical-align: top。做好inline-block布局，了解这一点及其内在的原因非常重要，vertical-align的对inline level元素影响可谓是无处无在，我们可以动手做一个demo页面，
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>inline-block布局</title> <style> *{ margin: 0; padding: 0; } .wrapper{ margin-top: 10px; background-color: orange; } .inner{ display: inline-block; width: 200px; height: 100px; background-color: lightblue; } </style> </head> <body> <div class="wrapper"> <div class="inner"></div></div> </body> </html>
效果见http://codepen.io/CoolHector/pen/RabYmy，我把解决方式都注释掉了。在这里会发现，class为inner的div的并未完全占据父元素wrapper的高度，而是有一个间隙（这里是垂直间隙），造成这个间隙的原因就是因为inline-level 的元素会受到vertical-align这个属性的影响，尽管我们并未去显式地设置这个属性。这是因为vertical-align的默认属性为baseline，即基线对齐（基线为英文字母x的下边缘，而字母x的高度又受到了line-height的影响），只要是inline level元素就会受到默认基线对齐的vertical-align的影响。张鑫旭老师对此解释的相当明了，参看http://www.zhangxinxu.com/wordpress/?p=4925 。 这里我就不再赘述了。
去除这个间隙的方法就是给inner这个元素添加除baseinle之外的对齐（bottom,middle,top）,注意vertical-align只作用于inline-level元素且inherit为no，即不会继承给子元素，所以不要给任何块状元素设置该属性，没有任何意义。再者就是将line-height值设为极小值，此时文本的基线上移，从而达到消除间隙的目的。
2.我们需要设置inline-block元素的宽度。//因为inline-block元素具有收缩性（引用张鑫旭老师的形容，比较形象化），同float，绝对定位元素表现相似（这里不谈这两者是脱离文档流），收缩性的表现是元素不设置宽度，宽度由内容区决定（content area）。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>"收缩性"属性</title> <style> .test{ background-color: orange; /*position: absolute;*/ /*float: left;*/ /*display: inline-block;*/ } </style> </head> <body> <div class="test">Lorem ipsum dolor sit amet</div> </body> </html>
3.我们使用inline-block元素布局还有一点要注意的就是元素间可能出现一个空格大小的间隙，这个间隙是由于html源代码中，换行符/空格 导致的，解决方法有很多，我一般是在inline-block元素之间加HTML注释。假设下面li的display设置为inline-block。为消除间隙，我在li标签之间使用了注释符，当然这种方法会使代码变得冗长。
<ul>
<li></li><!--
--><li></li><!--
--><li></li>
</ul>
因为这篇文章是歪果仁写的，所以歪果仁肯定不会想到，在地球的另一边的我们还需要注意一点就是对IE6,7的兼容，我木有做过具体项目，但是知道比如携程这样的网站到现在还需要考虑到对IE6的兼容实现。众所周知，在IE6,7并不能识别display: inline-block，但是这样设置却会触发haslayout。这又分为两种情况，第一种，对inline level元素而言，我们就可以不需要再做hack了，因为触发了haslayout，从而可以设置宽高，同时本身又是行内显示。第二种就是对block元素设置display: ineline-block，但是并不会改变该元素的默认displa为block的表现，所以我们在这里需要做一下hack兼容，即*display: inline。
参考
张鑫旭 CSS深入理解vertical-align和line-height的基友关系 : http://www.zhangxinxu.com/wordpress/?p=4925
穆乙 关于Block Formatting Context－－BFC和IE的hasLayout : http://www.cnblogs.com/pigtail/archive/2013/01/23/2871627.html
