<html lang="ar" dir="rtl">
<head>
<style>
body { writing-mode: horizontal-tb; }
</style>
</head>
<body>
<div class="card">...</div>
</body>
</html>.card-icon {
position: absolute;
top: 10px;
left: 12px;
}.card-icon {
position: absolute;
inset-block-start: 10px;
inset-inline-start: 12px;
}<div class="search-box">
<span class="search-icon">🔍</span>
<input type="text" placeholder="搜索...">
</div>
⚠️ 常见错误：在旧浏览器上逻辑属性未被支持（IE11 及以下）。务必使用
- **错误一：混用物理与逻辑属性导致冲突**
`margin-left: 20px; margin-inline-start: 10px;` 后者会覆盖前者，但方向不明确时容易产生歧义。统一使用逻辑属性。
- **错误二：未设置 `writing-mode` 或方向信息**
逻辑属性依赖于 `dir` 和 `writing-mode`。如果根元素缺少 `dir`，浏览器默认 LTR，但 RTL 场景下无法自动适配。
- **错误三：对 `border-radius` 使用逻辑属性**
`border-start-start-radius` 等是实验性属性，兼容性不足。建议仍使用物理属性并配合 `@property` 或手动方向选择。
#### 3.8 性能与稳定性优化
- **零运行时开销**：逻辑属性在 CSS 编译阶段即被解析为物理值，不增加 JavaScript 计算。
- **减少 !important 和覆盖样式**：使用逻辑属性后，RTL 覆盖代码量减少 70% 以上，降低维护成本。
- **结合 CSS 变量**：定义 `--spacing-inline: 1rem`，然后在逻辑属性中引用，统一调整间距。
@supports 或 PostCSS 插件回退。
💡 进阶建议：在组件库中使用逻辑属性编写基础组件（如按钮、标签、输入框），暴露的属性名如
#### 3.9 本章小结
- 逻辑属性将物理坐标（上下左右）映射到 inline/block 轴，自动适应 LTR 和 RTL。
- 核心属性：`inset-inline`、`margin-inline`、`padding-inline` 及其 start/end 变体。
- 迁移步骤：设置 `dir` → 替换物理属性 → 验证。
- 调试时关注计算后的物理坐标，注意浏览器兼容性并准备降级方案。
在下一部分（第4章）中，我们将深入 **`min-block-size`、`max-inline-size`** 等逻辑尺寸属性的实际应用，让弹性布局彻底摆脱物理方向束缚。
paddingInline 将自动跟随文档方向，无需每个组件写两套主题。