块级元素（block elements）,来源于 CSS 盒子模型。块级元素包含 width height,padding,border 与 margin，他们的排列方式是从上到下排列。 行内元素，排列方式是水平排列。 行内元素（inline elements）排列方式是水平排列。 行内块元素（inline-block elements）在内部他的表现类似 block 元素，比如他拥有 block 元素的 width height,即可以设定自己的高宽值，亦可以设定自己的 padding,border 与 margin，而外部的排列方式有类似行内元素，即水平排列，而不是像块级元素一样从上到下排列。
Replaced element 置换元素 #
说到这，有必要提的就是置换元素。何为置换元素，在 html 中，有类特殊的元素如:
<img>|<input>|<button>|<select>|<textarea>|<label>
他们被称为可置换元素（Replaced element）。他们区别一般 inline 元素（相对而言，称 non-replaced element）是：这些元素拥有内在尺寸(intrinsic dimensions),他们可以设置 width/height 属性。他们的性质同设置了 display:inline-block 的元素一致。上述六个标签在现代浏览器中即为天生的 inline-block 元素。
包裹性 #
包裹性的另一种说法就是让元素 inline-block 化。意思是默认情况下一个 div 的宽度是以 100%显示的，而一旦给这个 div 添加了 postion:absolute 属性，则 100%的默认宽度会变成自适应的内部元素宽度。而诸如：
overflow | position:absolute | float:left/right 等都可以让元素 inline-block 化产生包裹性。
而包裹性的作用很多，其中一个是可以使用其来清除元素的浮动。
inline-block 的作用 #
css 布局创建网站,浮动绝对占据了很大的比例.大块区域如主内容及侧边栏,以及在其中的小块区域,都可以看到浮动的影子。只是浮动经常会产生一些问题，那么问题来了？浮动是唯一的解决方案吗?
浮动通常表现正常，但有时候搞起来会很纠结。特别是处理内部容器中的浮动，比如对一排图片使用浮动后对齐出现问题。So，inline-block 是我们的另一种选择。使用这种属性可以模拟部分浮动的特征，而不需要处理一些浮动带来的问题。
这里极力推荐一篇张鑫旭的文章：拜拜了浮动布局-基于 display:inline-block 的列表布局。文章讲解的非常透彻，也将使用 inline-block 需要解决的兼容问题给出了十分详尽可靠的解决方案。
inline-block 和 float 的区别 #
虽然设置浮动跟设置 inline-block 有些特征类似，但两者的区别还是非常明显的:
文档流（Document flow）:浮动元素会脱离文档流，并使得周围元素环绕这个元素。而 inline-block 元素仍在文档流内。因此设置 inline-block 不需要清除浮动。当然，周围元素不会环绕这个元素，你也不可能通过清除 inline-block 就让一个元素跑到下面去。
水平位置（Horizontal position）：很明显你不能通过给父元素设置 text-align:center 让浮动元素居中。事实上定位类属性设置到父元素上，均不会影响父元素内浮动的元素。但是父元素内元素如果设置了 display：inline-block，则对父元素设置一些定位属性会影响到子元素。（这还是因为浮动元素脱离文档流的关系）。
垂直对齐（Vertical alignment）：inline-block 元素沿着默认的基线对齐。浮动元素紧贴顶部。你可以通过 vertical 属性设置这个默认基线，但对浮动元素这种方法就不行了。这也是我倾向于 inline-block 的主要原因。
空白（Whitespace）：inline-block 包含 html 空白节点。如果你的 html 中一系列元素每个元素之间都换行了，当你对这些元素设置 inline-block 时，这些元素之间就会出现空白。而浮动元素会忽略空白节点，互相紧贴
IE6 和 IE7：Ie67 对此属性部分支持。如果你要兼容这些浏览器，必须解决这个问题。可参照去除 inline-block 元素间间距的 N 种方法。