逻辑属性为何重要：国际化
了解物理 CSS 属性为何会破坏 RTL 布局，以及逻辑属性如何解决这一问题。
逻辑属性为何重要：国际化 是 CoddyKit 上的免费 CSS Academy 课时。 这是第 1 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 CSS Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 CSS Academy 课程共包含 4 节课。
物理属性的问题
传统 CSS 使用物理方向：顶部、右侧、底部和左侧。这对于英语等从左到右（LTR）的语言没有问题，但对于阿拉伯语和希伯来语等从右到左（RTL）的语言，或传统日语等竖排书写系统，就会出现问题。
物理属性与逻辑属性
请比较：
- 物理：顶部、右侧、底部、左侧——固定于屏幕
- 逻辑：block-start、block-end、inline-start、inline-end——相对于书写模式
块轴与行内轴
每种书写系统都有：
- 块轴：文本块堆叠的方向（在 LTR/RTL 中为垂直方向，在竖排书写中为水平方向）
- 行内轴：文本在一行中流动的方向（在 LTR/RTL 中为水平方向，在竖排书写中为垂直方向）
LTR 与 RTL 布局
在 LTR（英语）中：inline-start = 左侧，inline-end = 右侧。在 RTL（阿拉伯语）中：inline-start = 右侧，inline-end = 左侧。逻辑属性会自动适配，无需媒体查询或 JavaScript。
使用物理属性的实际代价
使用物理属性编写的网站，需要为每个应当翻转的 margin、padding、border、position 和 text-alignment 属性编写单独的 RTL 覆盖样式表或逐属性覆盖规则。这会使维护工作翻倍。
书写模式会影响坐标轴
设置 writing-mode: vertical-rl（日语或韩语竖排）后，块轴会变为水平轴，行内轴会变为垂直轴。逻辑属性会自动适配。
<div class="vertical-text">縦書きテキスト Vertical Text</div>
现代 CSS 中的采用情况
所有主流浏览器都支持逻辑属性。CSS 规范现在建议，对于任何与可能随书写模式或方向变化的方向相关的属性，都使用逻辑属性。
实际影响
正确使用逻辑属性的单一代码库可以支持 LTR、RTL 和竖排书写，而无需重复代码。CSS 会直接遵循根元素上的 direction 和 writing-mode 值。
HTML 中的 dir="rtl"
请在 HTML 中设置书写方向，而不只是设置 CSS：
<div dir="rtl" lang="ar" class="rtl-demo">هذا نص من اليمين إلى اليسار</div>
渐进式采用
不需要一次性重写全部 CSS。请先在新组件中使用逻辑属性。随着时间推移，再重构属于国际化敏感区域的组件中的物理属性。
CSS direction 属性
direction CSS 属性（ltr 或 rtl）会影响行内流向。它与 writing-mode 一起，为元素定义完整的书写系统上下文。
快速检查
为什么像 margin-left 这样的物理 CSS 属性会在 RTL 布局中造成问题？
回顾
CSS 逻辑属性使用块/行内模型，而不是物理上的顶部、右侧、底部和左侧。这使单一样式表能够适用于 LTR、RTL 和竖排书写系统。direction 和 writing-mode 属性定义上下文，逻辑属性会根据该上下文自动适配。
常见问题解答
「逻辑属性为何重要：国际化」课时是免费的吗？
是的 — 「逻辑属性为何重要：国际化」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 CSS Academy 课程的其余内容，请升级到 CoddyKit PRO。 CSS Academy 课程共包含 4 节课。
「逻辑属性为何重要：国际化」这节课中我会学到什么？
了解物理 CSS 属性为何会破坏 RTL 布局，以及逻辑属性如何解决这一问题。 你通过在浏览器中直接运行的动手代码来练习 CSS Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 CSS Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 CSS Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 1 节课，共 4 节。
「逻辑属性为何重要：国际化」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 CSS Academy 课中编写并运行代码吗？
能。每节 CSS Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。
此课程中的所有课时
- 逻辑属性为何重要：国际化
- 块方向与行内方向
- 逻辑外边距、内边距与边框
- RTL 布局中的逻辑属性