理解display:inline、block、inline-block

要理解display:inline、block、inline-block的区别，需要先了解HTML中的块级（block）元素和行级（inline）元素的特点，行内元素也叫内联元素。

• 块级元素

总是另起一行开始；高度，行高以及顶、底边距都可以控制；宽度缺省是它所在容器的100%，除非设定一个宽度。块级元素通常作为其他元素的容器，可以容纳内联元素和其他块元素。block element的HTML标签如下：address-地址blockquote-块引用center-居中对齐块div-常用块级元素dl-定义列表form-交互表单fieldset-form控制组hr-水平分隔线ol-排序表单ul-非排序列表dir-目录列表p-段落PRe-格式化文本isindex-input promptmenu-菜单列表table-表格h1...h6-标题noframes-frames可选内容（对于不支持frame的浏览器显示此区块内容）noscript-可选脚本内容（对于不支持script的浏览器显示此内容）

• 行级元素

和其他元素都在一行上；高度，行高以及顶、底边距不可改变；高度就是它所容纳的文字或图片的宽度，不可改变。一般都是基于语义级（semantic）的基本元素，只能容纳文本或者其他内联元素，内联元素的HTML标签分类如下：

a-锚点abbr-缩写acronym-首字font-字体设定（不推荐）b-粗体（不推荐）big-bidi overrideem-强调br-换行small-小字体文本strong-粗体强调i-斜体img-图片input-输入框label-表格标签select-项目选择textarea-多行文本输入框u-下划线var-定义变量cite-引用code-计算机代码（在引用源码的时候需要）dfn-定义字段kbd-定义键盘文本q-短引用s-中划线（不推荐）strike-中划线sub-下标sup-上标tt-电传文本

HTML中有些元素是可变元素，可根据上下文语境决定该元素为块元素或者内联元素。

applet-java appletbutton-按钮del-删除文本iframe-inline frameins-插入的文本map-图片区块（map）object-object对象script-客户端脚本

display:block就是将元素显示为块级元素，display:inline则将元素显示为行内元素。

display：inline-block将元素显示为行内元素，但是元素的内容作为块元素处理。旁边的内联元素和该对象显示在同一行，并且允许空格，但是该元素具有块元素的特性，可以设置其高度，宽度等属性。在同一行内有不同高度内容的元素时，通常要设置对齐方式如vertical-align: top;来使元素顶部对齐。

• 兼容性

CSS中使用display:inline-block;来样式化，在Firefox, Safari, Google Chrome 和 IE 8及以上是有效的。但是在早期的IE，比如IE 7，对行内元素设置inline-block无法实现inline-block的效果。只是触发了块元素的layout，而行内元素本身就是行布局，所以触发后，依然是行布局。

对IE8以下的版本，可以采用以下两种方法来实现inline-block的效果：

1. 先用display:inline-block属性触发块元素，然后再定义display:inline，让块元素呈递为内联对象（原理：这是IE的一个经典bug，如果先定义了display:inline-block，然后再设置display回inline或block，layout不会消失），代码如下：

   1 div {display:inline-block;}2 div {display:inline;}

2. 将块元素设置为内联对象(display:inline)，然后通过zoom:1触发块元素的layout，代码如下：

   div {display:inline; zoom:1;}

   参考了http://www.cnblogs.com/jdonson/archive/2011/06/10/2077932.html，和一些网上的资料，算是平时一点平时的学习总结吧！