direction: rtl 主要改变内联内容的书写顺序和对齐基准，如文字、inline元素、表单控件及表格单元格文本；不翻转flex/grid主轴、不镜像margin-left等物理属性，仅影响text-align逻辑起点、unicode双向算法行为及光标输入顺序。
direction:rtl 会改变哪些元素的排列方向
direction:rtl 主要影响块级容器内**内联内容的书写顺序和对齐基准**，比如文字、inline 元素、表单控件（如 input）、表格单元格中的文本。它不会翻转 flex 或 grid 的主轴方向，也不会自动镜像 margin-left 这类物理方向属性。
常见误判是以为设了 direction:rtl 就能“一键右对齐+从右读”，其实它只定义文本流起点在右侧，后续排布仍依赖 text-align 和盒模型逻辑：
-
text-align: left在rtl容器中实际靠右对齐（因为“left”此时指逻辑左，即视觉右） -
text-align: right反而靠左对齐 -
padding-left仍是物理左侧，不会随direction自动切换为右侧内边距
为什么设置了 direction:rtl 但中文/英文没变化
中文和拉丁字母本身是 双向中性字符（Bidi-Neutral），单独出现时不受 direction 影响——它们始终按自身书写习惯排布。只有当混合阿拉伯文、希伯来文等 强 RTL 字符 时，浏览器才会触发 Unicode 双向算法（UBA），真正体现 direction 的作用。
验证方法：在元素中插入一个阿拉伯字母（如 ش）或使用 （Right-to-Left Mark）：
<div style="direction: rtl">Hello ش world</div>
你会看到 ش 周围的拉丁词被整体拉到右侧并反向包裹。纯中英文段落加 direction:rtl 通常只是让 text-align 行为逻辑反转，视觉上可能仅表现为右对齐。
配合 text-align 和 unicode-bidi 实现可控 RTL 布局
单靠 direction:rtl 很难精准控制混合语言或复杂 UI 的流向。必须组合使用：
-
text-align: start比left/right更安全——它按direction的逻辑起点对齐，rtl下自动右对齐 -
unicode-bidi: embed强制将内容当作独立双向段落处理，避免被父级 UBA 干扰 - 对需要镜像的物理属性（如
margin,padding,border），必须显式重写：margin-right替代margin-left
示例（安全的 RTL 文本容器）：
<div style="direction: rtl; text-align: start; unicode-bidi: embed">نص عربي و English</div>
RTL 布局中容易忽略的 CSS 属性陷阱
很多 CSS 属性默认按物理方向解析，direction 不会自动翻转它们，导致 RTL 下 UI 错位：
-
float: left仍向视口左侧浮动，应改用float: inline-start -
background-position: left center中的left是物理左，需改为background-position: top right center或使用start关键字（如background-position: top start center） -
transform: translateX(-10px)总是向左移，RTL 下想“向逻辑起始方向移动”得动态判断或用translateX(10px) -
border-left保持左侧边框，RTL 场景下常需对应改为border-right
真正健壮的 RTL 支持，往往要搭配 @supports (direction: rtl) 或 CSS 自定义属性做条件覆盖，而不是只靠一个 direction 声明。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
