css中display属性有哪些值

/* display 属性的常见值及其示例 */

/* 1. block */
.block {
  display: block;
}
/* 解释：元素作为块级元素显示，独占一行，宽度默认为父元素的100%。 */

/* 2. inline */
.inline {
  display: inline;
}
/* 解释：元素作为内联元素显示，不会独占一行，宽度仅为其内容的宽度。 */

/* 3. inline-block */
.inline-block {
  display: inline-block;
}
/* 解释：元素作为内联块级元素显示，不会独占一行，但可以设置宽度和高度。 */

/* 4. none */
.none {
  display: none;
}
/* 解释：元素不会被渲染在页面上，不占据任何空间。 */

/* 5. flex */
.flex-container {
  display: flex;
}
/* 解释：元素作为弹性容器显示，其子元素会按照弹性布局规则排列。 */

/* 6. grid */
.grid-container {
  display: grid;
}
/* 解释：元素作为网格容器显示，其子元素会按照网格布局规则排列。 */

/* 7. table */
.table-element {
  display: table;
}
/* 解释：元素作为表格显示，类似 HTML 的 <table> 标签。 */

/* 8. list-item */
.list-item {
  display: list-item;
}
/* 解释：元素作为列表项显示，通常带有项目符号或编号。 */