display属性：inline、block、inline-block

　　这两天在敲jQuery UI的源码，遇到display属性值inline-block，之前没有遇到过，于是就整理一下（仅供参考）。

display:block就是将元素显示为块级元素。

　　block元素前后自动换行，不与其他元素在一行，高度、宽度、边距等都可以设置，常用的block元素有：<div>, <p>, <h1>, <form>, <ul> , <li>等。

display:inline将元素显示为行内元素。

　　行内元素和其他元素在同一行，不换行，且它的宽度、高度、边距等不可以改变，宽度就是它文字或图片的宽度，常用的行内元素有<span>, <a>, <label>, <input>, <img>, <strong> ,<em>等。

display:none不显示元素。

　　将某元素的display属性设置为none以后，该元素将不再显示，并且它不占空间，不同于visibility：hidden，后者虽隐藏了元素，但是此元素仍占空间。

display:inline-block

　　inline-block将对象呈递为内联对象，而将内容呈递为块级对象，通俗点讲就是该元素不换行，显示为内联样式，但是它又可以改变宽度、高度、边距等，比如将span、a等标签设置inline-block属性后，就可以设置宽高。

　　注意：chrome、Firefox等浏览器都很好的支持inline-block属性，IE6&7浏览器对inline-block的属性支持性不好。

　　1、inline元素的display属性设置为inline-block，所有浏览器都支持。

　　2、block元素的display属性设置为inline-block，IE6&7不支持

　　IE中对内联元素使用display:inline-block，IE是不识别的，但使用display:inline-block在IE下会触发layout，从而使内联元素拥有了display:inline-block属性的表征。而对块元素设置display:inline-block属性无法实现inline-block的效果。这时块元素仅仅是被display:inline-block触发了layout，而它本身就是行布局，所以触发后，块元素依然还是行布局，而不会如Opera中块元素呈递为内联对象。

　　那IE6&7下如何实现inline-block效果呢？

　　方法一：先设置display: inline-block触发块元素，再定义display: inline，让块元素呈递为内联对象，但是必须注意的是，这两条语句必须放在两个css声明中才会生效（如果放在一个中，后面的会覆盖前面的）

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

　　div { display:inline-block; _zoom:1;_display:inline;} /*推荐*/
　　div { display:inline-block; _zoom:1;*display:inline;} /*推荐:IE67*/

　　就是这么多啦！