display:list-item àì夳堔傛蜴生んèń 2021-07-04 12:15 288阅读 0赞 `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;…}
还没有评论,来说两句吧...