Web 面向全球所有人开放，这一点从名称中便可看出！ 这意味着，无论用户身在何处、使用什么设备或说什么语言，只要能访问互联网，就有可能访问您的网站。
自适应设计的目的是让所有人都能访问您的内容。 将同样的理念应用于人类语言，便是国际化的驱动力，即为国际受众群体准备内容和设计。
逻辑属性
英语的书写方式是从左到右、从上到下，但并非所有语言都是如此。 有些语言（如阿拉伯语和希伯来语）是从右向左阅读，而有些日语字体则是垂直而非水平阅读。 为了适应这些书写模式，CSS 中引入了逻辑属性。
如果您编写 CSS，可能使用过“left”“right”“top”和“bottom”等方向关键字。 这些关键字是指用户设备的物理布局。
逻辑属性，另一方面，是指与内容流相关的框的边缘。 如果书写模式发生变化，使用逻辑属性编写的 CSS 会相应更新。 但方向属性并非如此。
方向属性 margin-left 始终是指内容框左侧的边距，而逻辑属性 margin-inline-start 是指从左向右书写的语言中内容框左侧的边距，以及从右向左书写的语言中内容框右侧的边距。
为了让您的设计适应不同的书写模式，请避免使用方向属性，而改用逻辑属性。
.byline { text-align: right; }
.byline { text-align: end; }
当 CSS 具有特定的方向值（如 left 或 right）时，会有一个对应的逻辑属性。我们曾经使用 margin-left，现在也使用 margin-inline-start。
在英语等文本从左向右流动的语言中，inline-start 对应于“left”，inline-end 对应于“right”。
同样，在英语等文本从上到下书写的语言中，block-start 对应于“top”，block-end 对应于“bottom”。
如果您在 CSS 中使用逻辑属性，则可以为页面的翻译使用相同的样式表。 即使您的页面被翻译成从右向左或从下向上书写的语言，您的设计也会相应调整。 您无需为每种语言单独设计。 通过使用逻辑属性，您的设计将响应每种书写模式。 这意味着，您的设计可以覆盖更多用户，而无需您花费时间为每种语言单独设计。
网格 (grid) 和弹性框 (flexbox) 等现代 CSS 布局技术默认使用逻辑属性。
如果您从 inline-start 和 block-start 而非 left 和 top 的角度考虑，就会发现这些现代技术更容易理解。
以一个常见模式为例，例如图标旁边有一些文本，或者表单字段旁边有一个标签。 不要考虑“标签应该在右侧留有边距”，而要考虑“标签应该在其内联轴的末尾留有边距”。
label { margin-right: 0.5em; }
label { margin-inline-end: 0.5em; }
如果该页面被翻译成从右向左书写的语言，则无需更新样式。
您可以在 html 元素上使用 dir 属性，模拟以从右向左书写的语言查看页面的效果。
值 ltr 表示“从左向右”。值“rtl”表示“从右向左”。
如果您想尝试文档方向（块轴）和书写模式（内联轴）的所有排列组合，请参阅此互动演示。
识别页面语言
最好在 html 元素上使用 lang 属性来识别页面的语言。
<html lang="en">
该示例适用于英语页面。您可以更加具体。以下是如何声明页面使用美式英语：
<html lang="en-us">
声明文档的语言对搜索引擎很有用。 它对屏幕阅读器和语音助理等辅助技术也很有用。 通过提供语言元数据，您可以帮助这些语音合成器正确发音您的内容。
lang 属性可以用于任何 HTML 元素，而不仅仅是 html。如果您在网页中切换语言，请指明该更改。
在本例中，有一个字是德语：
<p>I felt some <span lang="de">schadenfreude</span>.</p>
识别链接文档的语言
您还可以在链接上使用另一个名为 hreflang 的属性。
hreflang 采用与 lang 属性相同的语言代码表示法，并描述链接文档的语言。
如果您的整个页面有德语翻译版本，请按如下方式链接到该版本：
<a href="/path/to/german/version" hreflang="de">German version</a>
如果您使用德语文本来描述指向德语版本的链接，请同时使用 hreflang 和 lang。
在这里，文本“Deutsche Version”被标记为德语，目标链接也被标记为德语：
<a href="/path/to/german/version" hreflang="de" lang="de">Deutsche Version</a>
您还可以在 link 元素上使用 hreflang 属性。此属性位于文档的 head 中：
<link href="/path/to/german/version" rel="alternate" hreflang="de">
但与可以用于任何元素的 lang 属性不同，hreflang 只能应用于 a 和 link 元素。
在设计中考虑国际化
在设计将翻译成其他语言和书写模式的网站时，请考虑以下因素：
- 有些语言（如德语）中常用较长的字词。您的界面需要适应这些字词，因此请避免设计过窄的列。您还可以使用 CSS 引入连字符。
- 确保
line-height值可以容纳重音符号和其他变音符号等字符。在英语中看起来不错的文本行在其他语言中可能会重叠。 - 如果您使用的是 Web 字体，请确保该字体具有足够广泛的字符范围，以涵盖您要翻译成的语言。
- 不要创建包含文本的图片。如果这样做，您必须为每种语言创建单独的图片。相反，请将文本和图片分开，并使用 CSS 将文本叠加在图片上。
放眼国际
`lang` 和 `hreflang` 等属性使您的 HTML 对国际化更有意义。
同样，逻辑属性使您的 CSS 更具适应性。
如果您习惯于从 top、bottom、left 和 right 的角度考虑，那么可能很难开始考虑 block start、block end、inline start 和 inline end。
但这是值得的。逻辑属性是创建真正自适应布局的关键。
检查掌握情况
测试您对国际化的了解程度。
在英语中，框的物理 right 侧在逻辑上是哪一侧？
block-starttopblock-endbottominline-startleftinline-end您应该向 HTML 添加哪个属性，使其对国际化更有意义？
englishlanglanguagei18n接下来，您将学习如何处理页面级布局，也称为宏布局。