一、区分block，inline，inline-block
1、block
block元素会独占一行，多个block元素会各自新起一行。默认情况下，block元素宽度自动填满其父元素宽度。
block元素可以设置width,height属性。块级元素即使设置了宽度,仍然是独占一行。
block元素可以设置margin和padding属性。
立即学习“前端免费学习笔记（深入）”；
2、inline
inline元素不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行，其宽度随元素的内容而变化。
inline元素设置width,height属性无效。
inline元素的margin和padding属性，水平方向的padding-left, padding-right, margin-left, margin-right都产生边距效果；但竖直方向的padding-top, padding-bottom, margin-top, margin-bottom不会产生边距效果。
3.inline-block
inline-block 后的元素创建了一个行级的块容器，该元素内部（内容）被格式化成一个块元素，同时元素本身则被格式化成一个行内元素。
直白一点的意思就是：inline-block 的元素既具有 block 元素可以设置宽高的特性，同时又具有 inline 元素默认不换行的特性。当然不仅仅是这些特性，比如 inline-block 元素也可以设置 vertical-align 属性。简而言之：
二、兼容性
相对于针对手机上高版本-webkit-内核浏览器的流体布局方式flex()以及box()盒模型，inline-block的兼容性可谓有容乃大，但是网上还是有一种说法--ie6和ie7不支持inline-block，真的是这样吗，我们来探索一下。
在 msdn 微软开发者社区，找到了 IE 从5.5 开始支持 inline-block 的证据：
The inline-block value is supported starting with Internet Explorer 5.5. You can use this value to give an object a layout without specifying the object’s height or width.
既然这样，我们为什么还会看到这样的一组适配ie6,ie7代码呢：
display:inline-block;
*display:inline;
*zoom:1;
究其原因发现，在IE下，display:inline-block只是触发了元素的layout。比如将display:inline-block给到div上，只能保证这个div拥有块元素的特征（可以设置宽度和高度），但是还是行布局（产生换行）。接下来要设置display:inline.更改这个div的布局为内联布局（不产生换行）。
三、
好了，给大家补充了基础知识之后就可以进入今天的正题了
1、神奇的水平空隙
元素被inline-block之后，水平方向会产生大小不固定的空隙
如图：五个li之间的间隙就是inline-block产生的神奇现象。
原来默认inline-block元素之间会产生换行符（类似空格之类的空白字符），除非你的html结构
2、实现列表两端自适应布局（摒弃float）
为什么我会摒弃float?
首先，对于float，会面临清除浮动，高度坍塌等常见问题，最重要的，会引起重绘和回流等效率问题，也是我摒弃他的最重要原因，所以能用inline-block代替他为什么还坚持使用float呢。
现在，请出我们的另一个主角--text-align:justify，并且当子元素高度不一致的时候我们可以通过verticle-align来调整垂直方向的位置。
请记住：列表（或文字）要两端对齐的前提就是内容必须超过一行
看吧，就是这么简单，但是大家也会注意到最后一行的排列问题，放心，我们一个个来解决。
（1）最后一行也两边排列：
.justify_fix{display:inline-block; width:100%; height:0; overflow:hidden;} 给html加一个class="justify_fix"的元素就可以了
（2）最后一行左对齐排列：
.left_fix{height:0; padding:0; overflow:hidden;} html中补上n个class="left_fix"元素
n的个数就是每行元素的列表个数啦
好啦，问题解决了，怎么样，inline-block简单好用吧，只要记住和它搭配的这些个属性处理一般的布局应该不成问题。
第一篇文，各路大神请指教~
