万维网面向全世界所有人开放，这一点已在名称中体现！这意味着您的网站可能面向任何可以访问互联网的人开放，无论他们身在何处、使用什么设备或说什么语言。
自适应设计的目标是让所有人都能访问您的内容。将相同的理念应用于人类语言是国际化背后的驱动力，即为国际受众准备您的内容和设计。
逻辑属性
英语是从左到右、从上到下书写的，但并非所有语言都是这样书写的。有些语言（如阿拉伯语和希伯来语）是从右到左阅读的，而有些日语字体是垂直而不是水平阅读的。为了适应这些书写模式，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 中使用逻辑属性，您可以为页面的翻译使用相同的样式表。即使您的页面被翻译成从右到左或从下到上书写的语言，您的设计也会相应调整。您无需为每种语言制作单独的设计。通过使用逻辑属性，您的设计将响应每种书写模式。这意味着您的设计可以覆盖更多人，而您无需花费时间为每种语言制作单独的设计。
现代 CSS 布局技术（如 网格 和 Flexbox）默认使用逻辑属性。如果您从 inline-start 和 block-start 而不是 left 和 top 的角度思考，您会发现这些现代技术更容易理解。
以常见的模式为例，例如 图标旁边的文本 或表单字段旁边的标签。不要想“标签应该在右侧有边距”，而是想“标签应该在其内联轴的末端有边距”。
label { margin-right: 0.5em; }
label { margin-inline-end: 0.5em; }
如果该页面被翻译成从右到左的语言，则样式无需更新。您可以使用 dir 属性在您的 html 元素上模拟在从右到左的语言中查看页面的效果。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接下来，您将学习如何处理页面级布局，也称为 宏观布局。