学习目标

• 理解 CSS display 属性的基本作用与核心功能

• 掌握常见 display 值（如 block、inline、inline-block、none）的使用场景与行为差异

• 了解现代布局方式 flex 与 grid 在 display 中的应用

• 能够根据需求选择合适的 display 值构建页面结构

什么是 display

CSS 的 display 属性用于控制 HTML 元素在网页中的显示方式和布局行为。它决定了元素生成哪种类型的渲染框，从而影响其在文档流中的位置、尺寸以及与其他元素的交互方式。

基本语法如下：

display: value;

其中 value 可以是 block、inline、flex、grid、none 等多种取值。

常见值

block（块级显示）

• 默认行为：div、p、h1 等元素默认为 display: block

• 特点：

  • 独占一行，前后自动换行

  • 可设置宽度（width）和高度（height）

  • 默认宽度为父容器的 100%

#box1 {
  background: teal;
  display: block;
  width: 200px;
  height: 100px;
}

多个 block 元素会垂直堆叠显示。

inline（行内显示）

• 默认行为：<span>、<a>、<strong> 等元素默认为 display: inline。

• 特点：

  • 不独占一行，与其他行内元素在同一行显示

  • 无法设置 width 和 height

  • 宽高由内容决定

#item1 {
  background: teal;
  display: inline;
  /* width 和 height 将被忽略 */
}

行内元素适合用于文本内的局部样式控制。

inline-block（行内块级）

• 混合特性：兼具 inline 的同行显示能力与 block 的尺寸控制能力。

• 特点：

  • 可设置宽高

  • 不强制换行，多个元素可并排显示

  • 常用于导航栏、图标排列等响应式布局

.card {
  display: inline-block;
  width: 150px;
  height: 100px;
  background: lightblue;
  margin: 5px;
}

注意：inline-block 元素之间可能会因 HTML 空白字符产生间隙，可通过设置父容器 font-size: 0 或使用注释消除。

none（隐藏元素）

• 作用：完全从渲染树中移除元素，不占据任何空间。

• 与 visibility: hidden 的区别：

  • display: none：元素不可见且不占位

  • visibility: hidden：元素不可见但仍占位

#hidden-box {
  display: none; /* 该元素及其子元素均不会显示 */
}

常用于条件渲染、模态框切换等场景。

flex（弹性盒子布局）

• 用途：创建一维布局（单行或单列）

• 容器行为：设为 display: flex 后，其直接子元素成为“弹性项目”

• 优势：轻松实现居中、等分布局、自适应伸缩

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

grid（网格布局）

• 用途：创建二维布局（行 + 列）

• 容器行为：设为 display: grid 后，可通过 grid-template-columns 等属性定义网格结构

• 优势：复杂布局更简洁，支持区域命名、自动填充等高级功能

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

属性取值

注意：并非所有值在所有浏览器中都完全支持，实际开发中应优先使用主流值（如 block、flex、grid 等）。

重点总结

• display 是控制元素布局行为的核心属性

• block 独占一行，可设宽高；inline 不换行，不可设宽高

• inline-block 是实现横向排列且可控尺寸的常用方案

• none 完全移除元素，不占空间；不同于 visibility: hidden

• flex 与 grid 是现代响应式布局的基石，分别适用于一维与二维场景

• 选择合适的 display 值是构建高效、语义化页面结构的前提

思考题

1. 为什么将多个 <div> 设置为 display: inline 后，它们的 width 和 height 样式失效了？如何解决？

2. 在什么场景下你会选择 display: inline-block 而不是 display: flex 来实现水平排列？

3. 如果一个元素设置了 display: contents，它的背景色和边框还会显示吗？为什么？