← CSS 逻辑属性 · Logical Properties / 尺寸:inline-size 与 block-size 待审核 4 / 5
size · 尺寸

尺寸:inline-size 与 block-size

widthheight 度量的是固定的物理方向——水平与垂直,与书写模式无关。逻辑版改为沿轴度量:inline-size 是 inline 轴方向的尺寸,block-size 是 block 轴方向的尺寸(连同 min- / max- 前缀)。横排时 inline-size 等于 width;一旦竖排,同一个 inline-size 值会变成高度。两条轴的朝向只由 writing-mode 决定,因此逻辑尺寸与 direction 无关。

1 · 逻辑尺寸到物理尺寸的映射

行长约束。 限制正文的可读行长写 max-inline-size: 60chch0 字形的 advance measure,且按元素的 inline 轴度量,横排竖排约束的都是行长而非屏幕宽度。它只在西文下近似等于字符数,中日韩正文应改用按「水」(U+6C34)字形度量的 ic。卡片、提示框、表单控件的尺寸约束换成逻辑尺寸后,旋转书写方向不会写错维度。

仍有需要物理尺寸的场合。 当尺寸对应的是物理设备约束(如「不超过视口高度」),max-block-size: 100dvh 在竖排下会把这个限制加到横向,此时应继续用 max-height。若约束本身也应随书写模式转向,则连单位一起换成逻辑视口单位:max-block-size: 100dvb——vi / vb 及其 svb / lvb / dvb 一系变体按根元素的 inline / block 轴度量。选择依据是该尺寸的参照对象:随书写模式转向的用逻辑尺寸,绑定物理方向的用物理尺寸。