model · 轴模型

轴模型：从物理方向到 block / inline

物理属性以 top / right / bottom / left 指代四条固定方向的边，方向不随书写模式改变；逻辑属性改用两条随书写模式旋转的轴：block 轴[block axis]沿块级盒堆叠的方向延伸（horizontal-tb 下自上而下），inline 轴[inline axis]沿行内内容排列的方向延伸（horizontal-tb 且 ltr 下自左向右）。每条轴各有 start / end 两端，四条物理边因此改写为 block-start / block-end / inline-start / inline-end；具体对应哪条，由 writing-mode 与 direction 共同决定。注意「物理」限定的是方向而非参照系——逻辑属性只改变「哪条边」的判定方式，不改变该属性原有的取值基准。

1 · 逻辑边到物理边的映射

调整 writing-mode 与 direction，观察四条逻辑边各自对应的物理边。表中的对应关系为运行时测得：把逻辑 margin 应用到隐藏的探针元素上，再用 getComputedStyle 读回对应的物理属性。

图 1-1 · 逻辑边与物理边的对应罗盘，可切换书写模式与方向观察四条边如何改指。

2 · 全组合对照

同一条逻辑边在 3 种 writing-mode 与 2 种 direction 组合下对应的物理边，逐格实测：

图 2-1 · 书写模式与方向各组合下逻辑边到物理边的完整映射表。

映射规律。一般逻辑属性按元素自身的 writing-mode 与 direction 映射到物理边（float / clear 的逻辑值是例外，取包含块的书写模式，见逻辑值）。两条轴的朝向都由 writing-mode 决定：horizontal-tb 下 block 轴为纵向、inline 轴为横向，vertical-rl / vertical-lr 下两者互换。block 轴的两端也随之确定，与 direction 无关：horizontal-tb 下 block-start 为 top，vertical-rl 下为 right，vertical-lr 下为 left。direction 只决定 inline 轴的哪一端是 start：horizontal-tb 下 ltr 的 inline-start 对应 left，rtl 对应 right。inline-start 始终指向行首一侧。

不应将 inline 轴等同于水平方向。horizontal-tb 下 inline 轴恰好呈水平，易被误认为 inline-start 即 left；切换至 vertical-rl 后 inline 轴转为垂直，inline-start 在 ltr 下对应 top、rtl 下对应 bottom；sideways-lr 又反过来，ltr 下 inline-start 对应 bottom（实测 Chrome 151，核对于 2026-08）。逻辑属性的意义在于：同一套声明在不同书写模式下始终指向语义一致的一侧。