dir="rtl"能自动翻转文本对齐、flex/grid主轴起始、表单控件位置及unicode文本流，但margin/padding/float/position等含left/right的属性需手动替换为逻辑属性或配合[dir="rtl"]重写。
直接加 dir="rtl" 就能翻转布局，但别只靠它
HTML 原生支持 RTL（Right-to-Left）布局，最简单的方式就是在根元素或容器上加 dir="rtl"。浏览器会自动翻转文本流、表单控件顺序、Flex/Grid 主轴方向等。但实际项目中，仅靠这个属性往往不够——CSS 中显式写的 left/right 值不会自动对调，浮动、定位、边距、内边距等仍按 LTR 逻辑生效。
dir="rtl" 对哪些样式有自动影响？
它触发的是「书写模式（writing mode）」相关的渲染行为，主要影响：
-
text-align：start变成右对齐，end变成左对齐（推荐用text-align: start替代text-align: right） - Flexbox：
flex-direction: row的起始项默认移到右侧，justify-content: flex-start也从左变右 - CSS Grid：
grid-template-columns列序不变，但justify-items和justify-content的“start”含义翻转 - 表单元素：
<input type="submit">、<select></select>的箭头、清除按钮位置自动适配 - Unicode 文本流：阿拉伯语、希伯来语等天然按 RTL 渲染，无需额外设置
必须手动处理的 CSS 属性有哪些？
这些属性不会随 dir 改变而自动镜像，不改就会出错：
- 所有带
left/right的定位和盒模型属性：margin-left→ 应改用margin-inline-start；padding-right→ 改用padding-inline-end - 浮动：
float: left在 RTL 下仍往左浮，视觉上反而“卡住”，应改用float: inline-start - 绝对定位偏移：
left: 10px在 RTL 容器里还是往左偏，要换成inset-inline-start: 10px（或兼容写法right: 10px配合dir="rtl"） - 背景位置：
background-position: left top要改为background-position: inline-start top - 伪元素方向：
::before { content: "←" }在 RTL 下可能该显示 "→"，需配合[dir="rtl"]选择器重置
如何安全地做 RTL 切换？推荐用 CSS 自定义属性 + 属性选择器
硬编码两套样式太难维护，建议用声明式方式控制。例如：
:root {
--side-start: left;
--side-end: right;
}
[dir="rtl"] {
--side-start: right;
--side-end: left;
}
.box {
margin-<code>var(--side-start)</code>: 16px;
padding-<code>var(--side-end)</code>: 8px;
}
更现代的做法是直接用逻辑属性（如 margin-inline-start），但要注意 Safari 15.4+ 才完全支持 inset-inline-start 等新属性。如果要兼容旧版 iOS，仍需 fallback 到 [dir="rtl"] .box { margin-right: 16px; } 这类写法。
真正麻烦的不是加 dir，而是那些散落在各处的 left/right —— 它们藏在第三方组件、图标库、甚至 reset.css 里，上线后才在阿拉伯语用户反馈里暴露出来。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
