如何利用CSS logical properties实现适配多语言读写方向的布局？-css教程-PHP中文网

逻辑属性需方向上下文（dir/direction）才能生效；必须替换的方向敏感节点包括margin-inline-start、padding-inline-start、text-align: start、inline-size/block-size及inset-inline-start/end；降级需@supports手动控制并双写物理属性。

如何利用css logical properties实现适配多语言读写方向的布局？

直接用 margin-inline、padding-block 和 text-align: start 就能自动适配 LTR/RTL，不用写两套 CSS；但前提是必须设 dir="rtl" 或 direction: rtl，否则逻辑属性就按默认 LTR 解析——这不是语法问题，而是方向上下文缺失。

哪些地方必须换，哪些可以先不动

重点不是“全量替换”，而是锁定方向敏感节点。以下位置不换就会出错：

margin-inline-start 用于按钮组、图标、表单控件之间的水平间距（如工具栏按钮间 margin-inline-end: 4px）
padding-inline-start 用于 contenteditable 容器或输入框，确保光标首次进入时停在视觉起点（LTR 是左，RTL 是右）
text-align: start 必须用于段落级文本，它影响换行、首行缩进和对齐逻辑；text-align: left 在 RTL 下会强制左对齐，破坏阅读流
inline-size 和 block-size 要成对替换 width/height，尤其在 writing-mode: vertical-rl 场景下，混用会导致布局崩塌
绝对定位的 left/right 必须换成 inset-inline-start/inset-inline-end，否则不会随 dir 自动镜像

为什么写了 `margin-inline` 却没生效

常见原因不是语法写错，而是方向上下文没建立：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

根元素没设 dir="rtl" —— lang 属性不能替代 dir，浏览器只靠 dir 或 direction 决定逻辑映射
嵌入的 LTR 片段（如 URL、代码块）没用 <bdo dir="ltr"></bdo> 显式包裹，双向算法失效，导致周围逻辑属性计算异常
JS 动态插入内容后未同步设置 dir，margin-inline-end 等属性不会重生效，需触发重排（例如改 style.opacity 或强制 offsetHeight）
Safari ≤15.6 对 border-inline 静默忽略，box-sizing: border-box 下尺寸会不准，得加 @supports 降级

怎么安全降级兼容旧浏览器

别依赖 PostCSS 自动补全，手动控制更可靠：

用 @supports 包裹逻辑写法，外层写物理 fallback：

@supports (margin-inline: 1em) {
  .btn { margin-inline: 8px; }
}
@supports not (margin-inline: 1em) {
  .btn { margin-left: 8px; margin-right: 8px; }
}

Safari ≤15.3 不支持 padding-block 的重排，建议双写：padding-block: 10px; padding-top: 10px; padding-bottom: 10px;
margin-inline: 8px 12px 在 Safari ≤15.3 中完全无效，必须拆成 margin-inline-start: 8px; margin-inline-end: 12px;
编辑器类场景中，inset-inline-start 降级需 JS 分支判断：el.style.insetInlineStart = '20px'; 后备为 el.style.left = dir === 'rtl' ? 'auto' : '20px'; el.style.right = dir === 'rtl' ? '20px' : 'auto';