Frontend Academy · 课时

Display：block、inline、flex、grid 基础

Q: 「Display：block、inline、flex、grid 基础」这节课中我会学到什么？

切换不同的 display 值，了解 block、inline、flex 和 grid 如何以不同方式排列内容。 你通过在浏览器中直接运行的动手代码来练习 Frontend Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

切换不同的 display 值，了解 block、inline、flex 和 grid 如何以不同方式排列内容。

Display：block、inline、flex、grid 基础 是 CoddyKit 上的免费 Frontend Academy 课时。这是第 3 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 Frontend Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Frontend Academy 课程共包含 4 节课。

display 属性

display 属性是最重要的 CSS 布局属性。它控制元素如何参与布局流，以及如何排列其子元素。最常用的值包括：block、inline、inline-block、flex、grid 和 none。

display: block

块元素会占据其容器的全部宽度，并从新的一行开始。示例包括：<div>、<p> 和 <h1>。您可以为块元素设置宽度、高度、外边距和内边距。

.card {
  display: block;
  width: 100%;
  margin-bottom: 24px;
}

display: inline

行内元素会在文本中流动，不会从新的一行开始。示例包括：<span>、<a> 和 <strong>。宽度、高度和垂直外边距对行内元素不起作用。

span { display: inline; color: blue; }
/* Setting width: 200px on a span does nothing */

display: inline-block

inline-block 兼具两者的特点：元素像文本一样在行内流动，但可以像块元素一样接受宽度、高度和垂直外边距。它适合用于按钮和徽章，让它们排列在同一行文本中。

.badge {
  display: inline-block;
  padding: 4px 8px;
  background: #e2e8f0;
  border-radius: 4px;
  font-size: 0.75rem;
}

display: none

display: none 会将元素完全从布局中移除，不占用任何空间。请使用 visibility: hidden 隐藏元素，同时保留它原来占用的空间。

Flexbox——一维布局

display: flex 会将元素变成弹性容器。它的直接子元素会变成弹性项目，沿行（默认方向）或列排列。Flexbox 擅长分配空间和对齐项目。

.nav {
  display: flex;
  justify-content: space-between; /* horizontal */
  align-items: center;            /* vertical */
  gap: 16px;
}

Flexbox 的关键属性

.container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 24px;
}

CSS 网格——二维布局

display: grid 会将元素变成网格容器。您可以使用 grid-template-columns 和 grid-template-rows 定义行和列。网格非常适合页面布局和卡片网格。

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

fr 单位

fr（fraction，分数）单位用于分配可用空间。grid-template-columns: 1fr 2fr 1fr 会创建三列，中间一列获得的空间是其他列的两倍。

.layout {
  display: grid;
  grid-template-columns: 240px 1fr; /* sidebar + main */
  gap: 32px;
}

在 Flex 和 Grid 之间进行选择

对于一维布局（按钮行、卡片堆叠），请使用Flexbox。对于二维布局（页面骨架、具有明确行列的图片库），请使用Grid。两者可以在同一个页面中共存。

display: none 与 visibility: hidden

display: none：从布局中移除，屏幕阅读器无法访问。visibility: hidden：不可见但仍占据空间，也仍在无障碍树中。opacity: 0：不可见但仍占据空间，并且可以被访问。

快速检查

您需要布局一个包含多行多列的响应式卡片网格。哪种 display 值最适合作为起点？

回顾：display 值

block 占据全部宽度。inline 随文本流动。inline-block 兼具两者的特点。flex 沿一个维度排列子元素。grid 沿两个维度排列子元素。none 会将元素从布局中移除。掌握这些值，您就能控制网页上的各种布局。

常见问题解答

「Display：block、inline、flex、grid 基础」课时是免费的吗？

是的 — 「Display：block、inline、flex、grid 基础」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Frontend Academy 课程的其余内容，请升级到 CoddyKit PRO。 Frontend Academy 课程共包含 4 节课。

「Display：block、inline、flex、grid 基础」这节课中我会学到什么？

切换不同的 display 值，了解 block、inline、flex 和 grid 如何以不同方式排列内容。你通过在浏览器中直接运行的动手代码来练习 Frontend Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Frontend Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 Frontend Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 3 节课，共 4 节。

「Display：block、inline、flex、grid 基础」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 Frontend Academy 课中编写并运行代码吗？

能。每节 Frontend Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 Frontend Academy