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*/
就是这么多啦!