displayinline、block、inline-block的区别

display 属性规定元素应该生成的框的类型。

display:block
将元素转换为块级元素显示，此元素前后会带有换行符，高度，宽度以及顶和底边距都可控制；

例子：

<div>, <p>, <h1>, <form>, <ul> 和 <li>

display:inline
默认。此元素会被显示为内联元素，元素前后没有换行符和其他元素都在一行上；

高，宽及顶和底边距不可改变；

宽度就是它的文字或图片的宽度，不可改变。

例子

<span>, <a>, <label>, <input>, <img>, <strong> 和<em>

display:inline-block

简单来说就是在CSS中通过display:inline-block对一个对象指定inline-block属性，可以将对象呈递为内联对象，但是对象的内容作为块对象呈递。（CSS2.1 新增的值）让块元素和其他元素保持在一行上；

控制inline元素的宽度（对导航条特别有用）；

控制inline元素的高度；

无须设定宽度即可为一个块元素设定与文字同宽的背景色。

特点：
将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内，允许空格。

兼容性：
。但是这个属性目前不是所有的浏览器都支持，只有Opera和Safari支持，FireFox3和IE8据说将会支持，Firefox2和IE使用特殊办法可以实现这种效果

IE下块元素如何实现display:inline-block的效果？有两种方法：

先使用display:inline-block属性触发块元素，然后再定义display:inline，让块元素呈递为内联对象（两个display要先后放在两个CSS声明中才有效果，这是IE的一个经典bug，如果先定义了display:inline-block，然后再将display设回inline或block，layout不会消失）。代码如下（...为省略的其他属性内容）：
div {display:inline-block;...} 　　

div {display:inline;}

直接让块元素设置为内联对象呈递（设置属性display:inline），然后触发块元素的layout（如：zoom:1等）。代码如下：

div {display:inline; zoom:1;...}