逻辑属性能省掉镜像样式，因其绑定内容流起点（inline-start）而非固定物理方向：margin-inline-start在ltr下映射left、rtl下自动映射right，无需两套css或[dir="rtl"]覆盖。
直接用 margin-inline-start、padding-inline-end 等逻辑属性，配合根元素 dir="rtl"，就能让同一套 CSS 在 LTR/RTL 下自动适配——不需要写两套样式，也不需要 [dir="rtl"] .xxx 选择器手动覆盖。
为什么 logical properties 能省掉镜像样式？
传统物理属性（如 margin-left）是“死”的：它永远指向屏幕左边，不管语言方向。而逻辑属性是“活”的：它们绑定的是内容流的起点（inline-start）和终点（inline-end），浏览器根据 dir 自动映射到物理方向。
比如：
-
margin-inline-start: 12px→ LTR 下等效margin-left: 12px，RTL 下等效margin-right: 12px -
text-align: start→ LTR 下右对齐文字？不，是左对齐；RTL 下才是右对齐（因为“start”随方向翻转） -
inset-inline-start: 8px→ 替代left: 8px，在绝对定位中真正响应方向
哪些 logical properties 值得立刻替换？
不是所有逻辑属性都稳定可用。2026 年中，以下三组已可在主流浏览器（Chrome 120+、Firefox 125+、Safari 15.4+）中放心使用，且 PostCSS 插件能为旧版自动生成 fallback：
- 盒模型类：
margin-inline-start/margin-inline-end/padding-inline-start/padding-inline-end/border-inline-start-width - 定位类：
inset-inline-start/inset-inline-end/inset-block-start（替代top/bottom） - 文本类：
text-align: start/text-align: end（text-align: left已该淘汰）
注意：float: inline-start 在 Safari 15.4+ 才可靠；旧版仍需 [dir="rtl"] { float: right; } 降级。
必须同步设置 dir 和 lang，否则逻辑属性“失灵”
逻辑属性依赖浏览器对书写方向的完整识别。只加 dir="rtl" 但漏掉 lang，会导致：
- 表单光标移动错乱（尤其 Safari）
- 数字显示为西方格式（
123而非阿拉伯数字١٢٣） -
text-align: start对<input>无效（需额外direction: rtl或unicode-bidi: plaintext）
正确写法只有这一种：
动态切换时也必须成对操作：
document.documentElement.setAttribute("dir", "rtl");<br>document.documentElement.setAttribute("lang", "ar");
混合内容（如 URL、版本号）必须用 <bdi></bdi>，否则逻辑属性救不了
哪怕你把所有 CSS 都换成了逻辑属性，嵌入的英文或数字仍可能乱序。原因：Unicode 双向算法（UBA）只由 HTML 的 dir 属性触发，CSS 的 direction 或类名都不行。
错误写法：
<p>请访问 <span style="direction: ltr">https://v2.4.1</span></p>
正确写法：
<p>请访问 <bdi>https://v2.4.1</bdi></p>
这是唯一被所有浏览器强制执行的 UBA 开关。不加 <bdi></bdi>，复制出来的链接可能是 1.4.2/v:psht —— 逻辑属性再全也没用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
