block 与 inline

在了解任何具体的布局方法之前，我们需要先讨论一些基本概念。
两个源自正常文档流的重要概念——block 和 inline——会影响我们对布局的理解。某些元素默认以 block 方式显示，每当遇到它们时都会开始新的一行。因此，在英文页面中，我们可以认为 block 方向是垂直向下，因为每个 block 元素都会使内容向下推进。而 inline 元素则沿着与 block 流向垂直的方向排列。在英文中，inline 元素从左到右流动。

示例：
在下方示例中，li 标签默认为 block 级别。通过在 CSS 中移除 li 样式里 display: inline 的注释，将其改为 inline，再切换回 block，可以直观地观察到 inline 和 block 的不同方向。每次修改代码后，请等待几秒钟，查看输出结果的变化。当设置为 inline 时，应确保所有列表项都显示在一行水平排列。

需要记住的是，许多语言的书写方向与英文不同。有些是从右向左书写，有些则是垂直排列。如果你设计的页面最初基于英文，但被翻译成这些语言之一，内容的流动方向可能不再符合原来的 inline 和 block 方向，导致布局看起来像一团混乱，而不是你原本设想的“僵尸防空导弹”效果。

因此，让设计不依赖于特定的书写方向，可以提升网页的适用范围（从而增强其“击倒僵尸”的能力）。这并不意味着你必须在每种语言方向下都完美适配（除非你的受众是全球性的，并希望针对每种语言单独优化），也不表示你不能或不应针对特定语言方向进行调整。如果能一次性完成设计，使其在大多数语言方向下都能良好呈现，那就远胜于每次新增一种语言或方向时都从头开始。