逻辑属性

逻辑属性按内容方向表达尺寸和间距：inline 表示行方向，block 表示块方向，margin-inline、padding-block 和 inset-inline-start 不把布局写死为左右上下。

.article {
  max-inline-size: 65ch;
  margin-inline: auto;
  padding-block: 1rem;
  border-inline-start: 4px solid currentColor;
}

在从左到右和从右到左语言、竖排文字或组件旋转时，逻辑属性更能保留内容关系。物理属性和逻辑属性同时声明时，后者可能覆盖前者；迁移旧样式需要逐项检查，不要只做字符串替换。

实验与练习

切换 direction 和 writing-mode，观察 margin、padding、border 和 inset 的变化。把一组物理属性改成逻辑属性，检查 Flex/Grid 轴线、滚动方向和焦点顺序是否仍符合内容意图。

可运行微实验：能力检测与降级

先用 @supports 检测容器查询、cascade layers 或逻辑属性，再在支持与不支持路径提供同一内容的可用布局。用不同语言方向和不同容器宽度测试，记录哪些样式来自现代能力、哪些来自基础 CSS。

常见错误

• 把 inline 永远理解为水平方向。
• 物理和逻辑声明冲突却不检查层叠顺序。
• 只迁移间距，遗漏 border、inset 和尺寸属性。

继续阅读

下一篇补充现代伪类的关系和可访问状态：现代伪类增强。

练习

1. 用最小输入复现“逻辑属性”的成功路径，并记录可观察结果。
2. 改变一个时序、数据或宿主条件，解释结果为何变化。
3. 删除清理、校验或降级分支，写出能证明缺陷的断言。

查看本节答案