一、前言

某些情况下，行内元素和块级元素并不能满足我们的设计需求，因此有了Inline-block这个属性，从属性的名字，我们就可以分析出其综合了两者的一些特征。我们可以这样理解，这个属性是个行内属性，可以设置width和height或者我们可以理解成一个块级元素，不用换行。

二、简介

我们从一段代码说起：

 .content{
            width: 200px;
            height: 200px;
            background-color:lightpink;
            display: inline-block;
        }
    <span class="content content1">1</span>
    <span class="content content2">2</span>
    <span class="content content3">3</span>

demo.png
从上面的效果图，我们可以看出，使用此属性后，我们让行内元素具备了宽高属性。
同时我们也发现一个问题，为什么元素之间会有空隙呢？原因和解决方法见我的这篇文章display:inline-block元素之间存在间隙，原因及解决方案。
我们改一改HTML代码接着看：

    <span class="content content1">1</span>
    <span class="content content2"></span>
    <span class="content content3">3</span>

当我删除content2中的内容的时候，呈现出这样的内容：

demo2.png 为什么inline-block元素的位置会受到其内容的影响呢？我们可以查到这样一句话：inline-block元素可以将对象呈递为内联对象，但是对象的内容作为块对象呈递。这就是问题所在：对象仍然呈递为内联元素，而同一行内的内联元素默认是基于 baseline 对齐的。图中的黑线就是baseline:

demo3.png
关于基线请参考这篇CSS基线之道
但还有一个问题：为什么有内容的元素向下，而无内容的元素会向上呢？就此我们需要了解CSS渲染机制：对于一个inline-block元素，如果内部没有inline内联元素，或者overflow不是visible，则该元素的基线就是它margin的底边缘，否则就是元素内部最后一行内联元素的基线。
简单地就以上这种情况来说，没有内容的content2会基于它的margin底边缘也就是它的下边缘对齐，而包含内容的content1和content3会基于其内部内联元素的基线对齐，所以会造成这种一上一下的情况。

解决方法

float，当然这是备选方案，毕竟脱离文档流后页面元素会不好控制。
简单粗暴地给所有元素都加上内容，例如空格符。
设置所有内联元素 vertical-align: top/middle/bottom; 属性，改变默认设置。

三、布局

看inline-block的页面展示效果和float的效果差不多，那我们应不应该使用他代替float呢？

3.1、inline-block和float的区别

文档流:浮动元素会脱离文档流，并使得周围元素环绕这个元素。而inline-block元素仍在文档流内。因此设置inline-block不需要清除浮动。当然，周围元素不会环绕这个元素，你也不可能通过清除inline-block就让一个元素跑到下面去。
水平位置：很明显你不能通过给父元素设置text-align:center让浮动元素居中。但是父元素内元素如果设置了display：inline-block，则对父元素设置一些定位属性会影响到子元素。
垂直对齐：inline-block元素沿着默认的基线对齐。浮动元素紧贴顶部。可以通过vertical属性设置这个默认基线，但对浮动元素这种方法就不行了。
空白：inline-block包含html空白节点。而浮动元素会忽略空白节点，互相紧贴
IE6和IE7：Ie67对此属性部分支持。如果你要兼容这些浏览器，必须解决这个问题。这不是个大问题，但值得留意一下：