display:list-item

àì夳堔傛蜴生んèń 2021-07-04 12:15 277阅读 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;…}