块级、行内与行内块
理解 block、inline 和 inline-block 显示行为之间的区别。
块级、行内与行内块 是 CoddyKit 上的免费 CSS Academy 课时。 这是第 1 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 CSS Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 CSS Academy 课程共包含 4 节课。
display 属性
display 属性是 CSS 中最基础的属性之一。它决定元素如何参与布局流——是创建块级盒、行内盒，还是介于两者之间的盒子。
块级元素
块级元素会从新行开始，并扩展到填满容器的全部宽度。您可以为四个方向设置宽度、高度、外边距和内边距。
默认的块级元素：div、p、h1-h6、section、article。
<div>I'm a block element — full width, centered.</div>
行内元素
行内元素会在文本内部流动。它们不会从新行开始。设置 width 或 height 不会产生效果；上下外边距会被忽略，水平外边距和内边距有效。
默认的行内元素：span、a、strong、em、img。
<p>This is <span>an inline span</span> inside a paragraph.</p>
行内块元素
display: inline-block 是一种混合模式。元素以行内方式流动（不会强制换行），但像块级元素一样支持宽度、高度以及所有盒模型属性。
<a class="btn" href="#">Click Me</a>
用于导航的 inline-block
在 Flexbox 出现之前，inline-block 常用于创建水平导航栏。缺点是：HTML 源代码中的空白会在项目之间产生小间隙。
<ul><li>Home</li><li>About</li><li>Contact</li></ul>
移除行内间隙
可以通过在父元素上设置 font-size: 0 并在子元素上恢复字号，或通过消除 HTML 中的空白，来移除行内块元素之间的空白间隙。
<ul><li>One</li><li>Two</li><li>Three</li></ul>
使用 Flex 替代 inline-block
在现代 CSS 中，在父元素上设置 display: flex 是实现水平布局的首选方式，而且不会产生空白问题。对于单个元素的尺寸控制，inline-block 仍然很有用。
更改 display
可以使用 CSS 更改任何元素的 display 类型。常见用途包括将链接设置为按钮形状，或让列表项水平排列。
<a class="button" href="#">Button</a>
<ul><li>Item 1</li><li>Item 2</li></ul>
表格 display 值
CSS 提供了 display: table、display: table-row、display: table-cell 等值，可以将表格布局应用于非表格元素。如今很少需要使用，但在较旧的环境中对垂直居中很有帮助。
流根：display: flow-root
display: flow-root 会创建新的块格式化上下文，且不会产生 overflow: hidden 的副作用。它会清除浮动，并防止外边距折叠泄漏到容器外部。
<div class="clearfix">Contains floated children without collapsing.</div>
匿名盒
当块级元素和行内元素作为兄弟元素混合出现时，浏览器会将无归属的行内内容包装在匿名块盒中。这种行为不可见，但可以解释意外的布局偏移。
快速检查
哪个 display 值允许设置 width，同时让元素保持在行内流中？
回顾
块级元素占据全部宽度，并从新行开始。行内元素随文本流动，并忽略宽度和高度。行内块结合了两者的特点：以行内方式流动，但接受宽度和高度。现代布局更倾向于使用 Flexbox 和 Grid，而不是使用行内块网格。
常见问题解答
「块级、行内与行内块」课时是免费的吗？
是的 — 「块级、行内与行内块」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 CSS Academy 课程的其余内容，请升级到 CoddyKit PRO。 CSS Academy 课程共包含 4 节课。
「块级、行内与行内块」这节课中我会学到什么？
理解 block、inline 和 inline-block 显示行为之间的区别。 你通过在浏览器中直接运行的动手代码来练习 CSS Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 CSS Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 CSS Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 1 节课，共 4 节。
「块级、行内与行内块」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 CSS Academy 课中编写并运行代码吗？
能。每节 CSS Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。