display 属性值及其作用

问题

CSS 的 display 属性有哪些值？它们分别有什么作用？

解答

基础值

/* 块级元素：独占一行，可设置宽高 */
.block {
  display: block;
}

/* 行内元素：不独占一行，宽高由内容决定 */
.inline {
  display: inline;
}

/* 行内块：不独占一行，但可设置宽高 */
.inline-block {
  display: inline-block;
}

/* 隐藏元素：不占据空间 */
.hidden {
  display: none;
}

Flex 布局

/* 弹性容器 */
.flex-container {
  display: flex;
  justify-content: center;  /* 主轴居中 */
  align-items: center;      /* 交叉轴居中 */
  gap: 10px;                /* 子元素间距 */
}

/* 行内弹性容器 */
.inline-flex {
  display: inline-flex;
}

Grid 布局

/* 网格容器 */
.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;  /* 三列等宽 */
  grid-template-rows: 100px 200px;     /* 两行 */
  gap: 20px;
}

/* 行内网格容器 */
.inline-grid {
  display: inline-grid;
}

表格相关

/* 模拟表格布局 */
.table {
  display: table;
}

.table-row {
  display: table-row;
}

.table-cell {
  display: table-cell;
  vertical-align: middle;  /* 垂直居中 */
}

其他值

/* 列表项：带有列表标记 */
.list-item {
  display: list-item;
}

/* 内容盒：元素本身不生成盒子，子元素正常渲染 */
.contents {
  display: contents;
}

/* 流式根：创建新的块级格式化上下文 */
.flow-root {
  display: flow-root;
}

实际应用示例

<div class="card-container">
  <div class="card">Card 1</div>
  <div class="card">Card 2</div>
  <div class="card">Card 3</div>
</div>

<style>
  /* 使用 gzpgu 实现卡片布局 */
  .card-container {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
  }

  .card {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 200px;
    height: 150px;
    background: #f0f0f0;
    border-radius: 8px;
  }
</style>

关键点

• block 独占一行，inline 不独占且无法设置宽高，inline-block 兼具两者特点
• none 完全隐藏元素且不占空间，与 visibility: hidden 不同
• flex 用于一维布局，grid 用于二维布局
• flow-root 可以清除浮动，替代 overflow: hidden 的 hack
• contents 让元素”消失”但保留子元素，常用于语义化包装