CSS：权威指南，第 5 版

第 6 章 基本可视化格式 基本可视化格式

本作品已使用人工智能进行翻译。欢迎您提供反馈和意见：[e-mail]

您很可能经历过自己想要的布局无法按预期呈现的挫败感。在添加了 27 条样式规则后，你可能仍然不知道哪一条规则解决了你的问题。CSS是一个开放而强大的模型，任何一本书都不可能涵盖所有可能的属性和效果组合方式。 毫无疑问，你将不断发现使用CSS的新方法。不过，在全面掌握了视觉呈现模型的工作原理后，你就能更好地判断某种行为是否是 CSS 定义的呈现引擎的正确结果（即使是意想不到的结果）。

基本箱

CSS 的核心是假定每个元素都会生成一个或多个矩形框，称为元素框。(该规范的未来版本可能会允许非矩形形状，也确实有人提出了修改建议，但目前所有方框仍为矩形）。

每个元素框的中心都有一个内容区域。该内容区域周围有可选的填充、边框、轮廓和边距。之所以说这些区域是可选的，是因为它们的大小都可以设置为 0，从而有效地将它们从元素框中移除。图 6-1显示了一个内容区域示例，以及周围的填充、边框和边距区域。

图 6-1. 内容区及其周围环境

在了解可以改变元素所占空间的属性之前，我们先来介绍一下全面了解元素如何布局和占用空间所需的词汇。

快速入门

首先，我们将快速回顾一下我们将要讨论的盒子种类，以及理解接下来的解释所需的一些重要术语：

堵塞流向

也称为块轴，是块级元素框堆叠的方向。 在许多语言（包括所有欧洲语言和欧洲衍生语言）中，这个方向是从上至下。 在中文/日文/韩文（CJK）语言中，这个方向可以是从右到左或从上到下。 实际的块流方向由书写模式设置，第 15 章将对此进行讨论。

内嵌式底座方向

也称为内联轴，是文本行的书写方向。 在罗马语等语言中，这是从左到右的方向。 在阿拉伯语或希伯来语等语言中，内联基轴方向是从右到左。 在中日韩语言中，则可以是从上到下或从左到右。 与块流一样，内联基本方向由书写模式设置。

正常流量

默认系统，根据父元素的书写模式，将元素放置在浏览器的视口中。大多数元素都处于正常流程中，元素离开正常流程的唯一方法是浮动、定位，或变成灵活的方框、网格布局或表格元素。除非另有说明，本章的讨论将涵盖正常流程中的元素。

块盒

这是由段落、标题或<div> 等元素生成的 框。这些框在正常流程中会在框前和框后生成空白，因此正常流程中的块框会沿着块流程轴一个接一个地堆叠。几乎任何元素都可以通过声明display: block 来生成方框，不过还有其他方法可以让元素生成方框（例如浮动方框或使其成为柔性项）。

内联箱

这是一个由<strong> 或<span> 等元素生成的 框。这些框沿着内联基本方向布局，其前后不会产生换行符。如果内联框的长度超过了其元素的内联尺寸，那么（默认情况下，如果它未被替换）将会换行到多行。任何元素都可以通过声明display: inline.

非替换元件

这是一个 元素，其内容包含在文档中。例如，段落 (<p>) 是一个非替换元素，因为其文本内容就在元素本身中。

更换元件

这是一个 元素，用作其他内容的占位符。被替换元素的典型例子是<img> ，它只是指向一个图像文件，而这个图像文件会在<img> 元素本身所在的位置插入到文档流中。大多数表单元素也会被替换（如 ...