← CSS 逻辑属性 · Logical Properties / 轴模型:从物理方向到 block / inline 待审核 1 / 5
model · 轴模型

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

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

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

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

2 · 全组合对照

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

映射规律, 两条轴的朝向都由 writing-mode 决定:horizontal-tb 下 block 轴为纵向、inline 轴为横向,vertical-rl / vertical-lr 下两者互换。block 轴的两端也随之确定,与 direction 无关:horizontal-tbblock-start 为 top,vertical-rl 下为 right,vertical-lr 下为 left。direction 只决定 inline 轴的哪一端是 start:horizontal-tbltrinline-start 对应 left,rtl 对应 right。inline-start 始终指向行首一侧。

不应将 inline 轴等同于水平方向。horizontal-tb 下 inline 轴恰好呈水平,易被误认为 inline-start 即 left;切换至 vertical-rl 后 inline 轴转为垂直,inline-startltr 下对应 top、rtl 下对应 bottom。逻辑属性的意义在于:同一套声明在不同书写模式下始终指向语义一致的一侧。