css中display属性_CSS

CSS中的display属性用于控制元素的显示方式，它有以下几种值：

1、block（块级元素）

2、inline（行内元素）

3、inlineblock（行内块元素）

4、none（隐藏元素）

5、flex（弹性布局容器）

6、inlineflex（行内弹性布局容器）

7、grid（网格布局容器）

8、inlinegrid（行内网格布局容器）

9、table（表格布局容器）

10、tablerow（表格行布局容器）

11、tablecell（表格单元格布局容器）

12、tablecolumn（表格列布局容器）

13、listitem（列表项布局容器）

14、runin（在文本中运行的块级元素）

15、compact（紧凑块级元素，类似于HTML中的<dd>

16、marker（标记元素，用于表示文档中的标记）

17、inlinetable（行内表格布局容器）

18、tablecaption（表格标题布局容器）

19、flowroot（块级非替换元素，具有自动的块级格式化上下文）

20、scrollcontainer（创建一个滚动容器，当内容溢出时可以滚动）

21、inherit（继承父元素的display属性值）

以下是一些使用display属性的示例：

/* 设置div为块级元素 */
div {
  display: block;
}
/* 设置span为行内元素 */
span {
  display: inline;
}
/* 设置img为行内块元素 */
img {
  display: inlineblock;
}
/* 设置p为隐藏元素 */
p {
  display: none;
}

下面是一个关于CSS中display属性的介绍，列出了一些常用的display属性值及其作用：

请注意，display: runin;和display: compact;在现代的网页设计中几乎不再使用，并且不是所有浏览器都支持这些值。display: none;与visibility: hidden;不同，后者隐藏元素但仍占据空间，而display: none;完全移除元素，不占据任何空间。