display:list-item
为元素内容生成一个块型盒,随后再生成一个列表型的行内盒。其效果就和ul
中出现项目列表符号一样。通俗地说就是会在内容前面自动加上黑点,而display:block
则不会出现黑点。
display:block/inline/inline-block/inline-table/list-item
区别
- 大家都知道
display:block
是显示成块状,独占一行; - 而
inline
是行内的意思,会根据里面的内容大小而改变; - 那
display:inline-block
实际就是inline
可以定义宽高,但是重点是我试了一下,ie6、7
不支持这个样式。 inline-table
一般很少用到(ie6、7
不支持这个样式),表格属于block
类型,独占一行,如果想要文字跟它一行显示,就要把表格设置成inline-table
,这时会发现,safari
及chrome
垂直对齐方式为底部对齐,火狐和ie
及Opera
是顶部对齐,我们可以通过vertical-align
去修改对齐方式。list-item
将多个元素作为列表来显示,同时在元素的开头加上列表的标记。
Css_display: block inline inline-bock
区别
display:block
就是将元素显示为块级元素.
block
元素的特点是:
- 总是在新行上开始;
- 高度,行高以及顶和底边距都可控制;
- 宽度缺省是它的容器的
100%
,除非设定一个宽度和是块元素的例子。 <div>, <p>, <h1>, <form>, <ul>
和<li>
是块元素的例子。
display:inline
就是将元素显示为行内元素.
inline
元素的特点是:
- 和其他元素都在一行上;
- 高,行高及顶和底边距不可改变;
- 宽度就是它的文字或图片的宽度,不可改变。
<span>, <a>, <label>, <input>, <img>, <strong>
和<em>
是inline
元素的例子
inline
和block
可以控制一个元素的行宽高等特性,需要切换的情况如下:
- 让一个
inline
元素从新行开始; - 让块元素和其他元素保持在一行上;
- 控制
inline
元素的宽度(对导航条特别有用); - 控制
inline
元素的高度; - 无须设定宽度即可为一个块元素设定与文字同宽的背景色。
display:inline-block
将对象呈递为内联对象,但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内,允许空格。
inline-block
的元素特点:
- 将对象呈递为内联对象,但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内,允许空格。(准确地说,应用此特性的元素呈现为内联对象,周围元素保持在同一行,但可以设置宽度和高度地块元素的属性)
- 并不是所有浏览器都支持此属性,目前支持的浏览器有:
Opera、Safari
在IE
中对内联元素使用display:inline-block
,IE
是不识别的,但使用display:inline-block
在IE下会触发layout
,从而使内联元素拥有了display:inline-block
属性的表症。从上面的这个分析,也不难理解为什么IE
下,对块元素设置display:inline-block
属性无法实现inline-block
的效果。这时块元素仅仅是被display:inline-block
触发了layout
,而它本就是行布局,所以触发后,块元素依然还是行布局,而不会如Opera
中块元素呈递为内联对象。
IE
下块元素如何实现display:inline-block
的效果?
有两种方法:
1、先使用display:inline-block
属性触发块元素,然后再定义display:inline
,让块元素呈递为内联对象(两个display
要先后放在两个CSS
声明中才有效果,这是IE的一个经典bug
,如果先定义了display:inline-block
,然后再将display
设回inline
或block
,layout
不会消失)。代码如下(…
为省略的其他属性内容):
div {display:inline-block;…}
div {display:inline;}
2、直接让块元素设置为内联对象呈递(设置属性display:inline
),然后触发块元素的layout
(如:zoom:1
等)。代码如下:
div {display:inline; zoom:1;…}