vertical-rl 下 width 和 height 语义对调：width 控制视觉高度（列高），height 控制视觉宽度（列数）；需同步调整 line-height、margin、text-align 等为逻辑属性，并避免在 flex/grid 容器上直接设置 writing-mode。
vertical-rl 下 width 和 height 的语义完全对调
设 writing-mode: vertical-rl 后，块级容器的「宽高语义」不是视觉翻转，而是坐标系重定义：原 width 控制的是竖排文字的**视觉高度**（即一列能容纳多少行字），height 控制的是**视觉宽度**（即整段文字从右向左占几列空间）。不理解这点，90% 的竖排布局会出错——比如文字被截断、容器留大片空白、子元素溢出。
- 错误写法：
width: 200px; height: auto;→ 实际表现为“限制列高为 200px”，而“列宽”由内容撑开，常导致横向无限延伸 - 正确思路：预期视觉宽度为 120px、视觉高度为 300px → 应写
width: 300px; height: 120px; -
max-width比width更安全：防内容过长撑破布局，尤其混排英文时 -
min-height和fit-content在 vertical-rl 下计算异常，应避免；优先用固定height或max-height
line-height 和 margin 方向也跟着变
line-height 不再是“行间距”，而是“列间距”——即相邻字符在水平方向上的距离。同理，margin-top 变成向上偏移（在竖排坐标系里是向左），padding-right 实际出现在左侧。物理方向属性会失序，必须改用逻辑值。
- 用
margin-block-start替代margin-top，它始终对应文本流起始侧 - 用
text-align: start替代text-align: left，避免横竖切换后对齐反直觉 -
line-height: 2在竖排下会让汉字之间左右空隙变大，若需紧凑，可降到1.2或更低
flex 容器里直接设 writing-mode 会彻底打乱主轴
给 display: flex 父元素加 writing-mode: vertical-rl，不是让文字变竖，而是让整个 flex 坐标系旋转：原本 flex-direction: row 变成“从上到下堆叠”，justify-content: center 变成垂直居中，align-items: stretch 可能让子项高度塌陷。
- 现象：子项挤成一条线、
width/height尺寸错乱、文字被截断 - 根本原因：flex 仍按新坐标系解释方向，但开发者还按旧坐标系写尺寸
- 安全做法：只在纯文本块（如
<p></p>、<span></span>）内设writing-mode，别碰 flex/grid 父容器 - 真要竖排列表？用
flex-direction: column+ 子项各自设writing-mode: vertical-rl
响应式切换时尺寸和对齐必须成套重置
媒体查询里只改 writing-mode，不重置 width/height 和 text-align，几乎必然错乱。因为横竖切换不是状态切换，是布局坐标系切换。
- 竖排时未设
height→ 容器塌成一条线（height: auto失效） - 横排切回竖排时，旧
width值还在 → 文字被截断或留大片空白 -
text-align: right在竖排下变成顶部对齐，切回来后仍按逻辑端解释，行为不可预期 - 动态加载内容时，切换前先强制重排：
el.style.height = 'auto'; el.offsetHeight; el.style.height = '400px';
最易被忽略的点：vertical-rl 下 height 控制的是“视觉宽度”，但它不是像素意义上的宽度——而是整个竖排区域从右到左所占的空间量。这个值一旦设小，中文可能没地方落脚，英文数字却因 text-orientation: mixed 被旋转后强行塞进去，造成基线错位。务必配合 text-orientation: upright 和显式 width 控制视觉高度。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
