writing-mode: vertical-rl 会重定义盒模型逻辑坐标系，使 width 控制视觉高度（文字向下延伸距离）、height 控制视觉宽度（每列水平空间）；省略 width 导致向下溢出，省略 height 使列宽塌缩为单字宽；禁用在 flex/grid 父容器上，需配合 text-orientation: mixed 及逻辑属性如 margin-block-start 和 line-height 固定值使用。
writing-mode: vertical-rl 会翻转盒模型的逻辑坐标系，width 和 height 的语义互换——这不是“文字转了个身”，而是整个布局规则重定义。只设这个属性，90% 的竖排布局都会出错。
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语义也同步翻转，但开发者通常没重写
正确做法：不要给 display: flex 或 display: grid 的父容器设 writing-mode；只在纯文本块（如 <p>、<div class="text-block">）内使用。
立即学习“前端免费学习笔记（深入）”；
text-orientation 不设就等于没竖排
writing-mode 只管文本流向，不管字符朝向——真正决定“英数横排、汉字直立”的是 text-orientation：
- 默认
text-orientation: mixed：汉字直立，拉丁字母/数字顺时针转 90°（即“躺倒”） - 要让英文也直立：显式写
text-orientation: upright - 绝对不要用
text-orientation: sideways：它会让汉字也躺倒，彻底违背中文竖排意图
不设 text-orientation，哪怕 writing-mode 正确，英文和数字依然侧躺，视觉断裂严重。
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在竖排中影响新段落生成位置（左侧追加），不是为了对齐，别滥用它调底部对齐
最易被忽略的点是：line-height 方向已变，它现在控制相邻字之间的垂直间距；若保持 line-height: 1.5，实际字距可能过密，建议用固定值如 line-height: 32px。
