逻辑属性是为多方向书写模式设计的原生适配机制，自动映射到当前书写流的起始/结束侧，而非固定物理方位；需配合 direction 或 writing-mode 才生效，且 Safari 对 inset 类属性兼容性较差。
逻辑属性不是“更高级的替代品”，而是为多方向书写模式而生的原生适配机制——如果你的项目要支持阿拉伯语、希伯来语（RTL）或蒙古文、日文竖排（writing-mode: vertical-rl），用 margin-left 或 text-align: left 就会直接失效。
物理属性在 RTL 下会“反向错位”
当页面设为 direction: rtl 时，margin-left 依然作用于文档流的物理左侧（即视觉右侧），导致布局偏移方向与预期相反。比如一个本该贴着内容起始边的按钮，在阿拉伯语下反而跑到末尾。
-
text-align: left在 RTL 页面中会让文字左对齐——也就是朝向屏幕右边对齐，违背阅读习惯 -
padding-right会加在块的物理右边缘，但在竖排模式下它可能加在顶部或底部，完全不可预测 - 所有
top/right/bottom/left定位都基于视口坐标系，不随writing-mode或direction自动翻转
逻辑属性自动映射到当前书写流
它们不描述“屏幕哪一边”，而描述“内容往哪走”。例如：
-
margin-inline-start总是加在内联方向的起始侧：LTR 下 = 左，RTL 下 = 右，竖排下 = 上 -
text-align: start总是对齐到当前语言的首字符起始位置，无需条件判断 -
inset-block-start替代top，在writing-mode: vertical-rl时对应的是“顶部”，而非“物理上边”
兼容性已足够落地，但需注意 Safari 的 inset 坑
截至 2026 年 10 月，margin-inline、padding-block、border-inline 等盒模型类逻辑属性在 Chrome 120+、Firefox 125+、Safari 15.4+ 中已稳定支持；但定位类的 inset-inline 和 inset-block 在旧版 Safari（≤15.3）中存在解析异常或忽略行为。
立即学习“前端免费学习笔记（深入）”；
- 安全做法：用
inset-inline-start替换left，但必须搭配@supports (inset-inline-start: 0)条件加载，或 fallback 到left/right - 不要依赖
inset的简写形式（如inset: 0），它在 Safari 中兼容性更差 - 盒模型类属性可直接替换，无需前缀或降级——它们的回退机制天然存在：
margin-inline-start不生效时，浏览器会忽略它，继续使用你写的margin-left（如果你还留着）
真正容易被忽略的点是：逻辑属性只在启用了相应书写模式时才“活过来”。光写 text-align: start 没用，必须配合 direction 或 writing-mode 才能触发映射。很多团队写了逻辑属性却没改根节点的 dir 属性，结果发现样式毫无变化——不是语法错了，是流没切过去。
