vertical-rl下width控制垂直方向的行长（视觉高度），height控制水平方向的字列宽（视觉宽度）；省略width导致向下溢出，省略height使列宽塌缩为单字宽。
writing-mode 不改变“物理方向”，它重定义盒模型的逻辑坐标系——width 和 height 的语义会互换，这是所有布局错乱的根源。
vertical-rl 下 width 和 height 到底控制什么？
设 writing-mode: vertical-rl 后，块级容器的主轴变成垂直方向，导致：
-
width控制的是文字能向下延伸的最大距离（即“视觉高度”），不是水平宽度 -
height控制的是每列文字能占用的水平空间（即“视觉宽度”），不是垂直高度 - 省略
width→ 内容无限向下溢出（尤其overflow: visible时） - 省略
height→ 列宽塌缩为单字最小宽度（如汉字约 14–18px），看起来像一条细线
为什么 flex 或 grid 容器加 writing-mode 就失效？
因为 writing-mode 会翻转主轴与交叉轴定义，而 flex-direction、justify-content 等属性仍按原始坐标系解析，结果完全不可控：
-
display: flex; flex-direction: row在vertical-rl下实际表现为“从上到下堆叠” -
justify-content: center变成垂直居中，不是你想要的水平居中 -
align-items: flex-start的“start”参照的是 block-start（顶部），不是 left - 子项的
width/height语义也同步翻转，但开发者通常没重写
解决办法：不要给 flex 或 grid 父容器设 writing-mode；只在纯文本容器内使用，或改用 flex-direction: column + transform: rotate(90deg)（注意可访问性）。
立即学习“前端免费学习笔记（深入）”；
text-align 和 margin-top 这类物理属性还管用吗？
部分管用，但语义已变，容易误判：
-
text-align: right在vertical-rl下对齐到列的顶部（block-start），不是右边 -
margin-top仍作用于物理顶部，但“顶部”在竖排中可能对应内容起始位置，和预期不一致 - 推荐改用逻辑属性：
margin-block-start替代margin-top，text-align: start替代text-align: left -
direction: ltr在竖排中影响新段落生成位置（左侧追加），不是为了对齐，别滥用它调底部对齐
为什么设置了 vertical-rl，英文还是躺倒、中文直立？
因为 writing-mode 只管文本流向，不管字符朝向——真正决定“英数横排、汉字直立”的是 text-orientation：
- 默认值
text-orientation: mixed：汉字直立，拉丁字母/数字顺时针转 90°（即“躺倒”） - 要让英文也直立：显式写
text-orientation: upright - 绝对不要用
text-orientation: sideways：它会让汉字也躺倒，彻底违背中文竖排意图 - 该属性仅在
writing-mode非horizontal-tb时生效
最常被忽略的一点：盒模型翻转后，所有依赖物理方向的尺寸、间距、对齐都得重新校准；靠“试试看”很难调对，必须从逻辑坐标系出发重写规则。
