inset-inline-start 是逻辑定位属性，值取决于 direction 和 writing-mode：LTR 下等价 left，RTL 下等价 right；仅对 absolute/fixed 元素生效，不可与 left/right 混用，需配合 inset-block-start 等使用，依赖父元素 direction，非 body 或系统设置。
inset-inline-start 是什么，和 left 有什么区别
inset-inline-start 不是“另一个 left”，它是逻辑定位属性，值的意义取决于当前元素的 direction 和 writing-mode。在 LTR（如中文、英文）下，它等价于 left；在 RTL（如阿拉伯语、希伯来语）下，它等价于 right。关键在于：它不绑定物理方向，而是绑定文本流的“起始侧”。
- 它只在启用了
position: absolute或position: fixed的元素上生效（需要配合inset-block-start等其他逻辑 inset 属性使用） - 不能和
left/right混用在同一元素上，否则会被后者覆盖（CSS 会按规范优先级丢弃逻辑属性） - 它依赖父容器的
direction，不是浏览器语言或系统设置——哪怕页面是阿拉伯语，如果某个div显式设了direction: ltr，其子元素的inset-inline-start仍按 LTR 解析
实际写法：怎么让一个悬浮按钮在 LTR/RTL 下都靠“内容起始侧”固定
假设你有一个右下角的悬浮按钮，在 LTR 下应贴右下，在 RTL 下应贴左下（即“文本起始侧”的下方角落）。用物理属性要写两套规则；用逻辑属性只需一套：
.fab {
position: fixed;
inset-block-end: 1rem; /* 始终是“块方向末尾”，即底部 */
inset-inline-start: 1rem; /* “行内起始侧”：LTR=左，RTL=右 */
}
- 注意必须同时声明
inset-block-end和inset-inline-start，否则定位不完整（仅设一个不会自动补全其他方向） - 不要用
top/bottom+inset-inline-start混搭，会导致行为不可控 - 如果父容器有
transform或contain: layout，可能干扰inset的计算，此时退回到margin+direction判断更稳妥
常见翻车点：为什么加了 inset-inline-start 没反应
这个属性“静默失效”很常见，原因基本就这几个：
- 元素没有
position: absolute或position: fixed——inset-inline-start对static或relative元素无效 - CSS 中同时存在
left: 0（或right: 0），浏览器按规范直接忽略inset-inline-start - 父元素没设
direction，但你期望它继承 body 的 direction —— 实际上，direction不继承自body，而是继承自父元素；如果中间某层显式写了direction: ltr，就会打断 RTL 传播 - 使用了旧版 Safari（iOS ≤ 16.4 / macOS ≤ 13.3），它不支持
inset逻辑属性，只支持margin-inline-start这类逻辑 margin
兼容性兜底：要不要加 fallback
目前（2024 年中），Chrome/Firefox/Edge 全支持，Safari 从 16.4+ 开始支持 inset 系列。如果你的项目还需支持 iOS 16.3 或更早，就得写双份：
.tooltip {
left: 1rem; /* fallback for old Safari */
inset-inline-start: 1rem; /* modern browsers */
}
- 不要写成
@supports (inset-inline-start: 0)包裹，因为旧 Safari 会整个忽略该规则块，导致无 fallback - 更稳妥的是把物理属性写在前面，逻辑属性写在后面——CSS 会自然覆盖
- 如果项目已用 PostCSS，可配
postcss-logical插件自动补全，但注意它生成的是margin/padding类逻辑属性，不是inset；对定位仍需手动处理
真正容易被忽略的是：逻辑属性生效的前提，是你已经用 direction 或 dir 属性明确划分了文本流向。没这层上下文，inset-inline-start 就只是个不会报错、但永远按 LTR 解析的摆设。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
