writing-mode: vertical-rl 是中文竖排首选，但需配合 text-orientation: upright 防止英文数字旋转，注意宽高互换、line-height 控制纵向间距、padding 方向翻转，避免 flex/grid 嵌套异常，并优先测试 safari 17+ 和 firefox 120+。
writing-mode: vertical-rl 是中文竖排的默认选择，但不是万能解
中文网页做竖排，writing-mode: vertical-rl 是最直接、最符合阅读习惯的取值——文字从上到下，行从右到左。但它不是“设了就完事”的属性，必须配合其他控制才能稳定呈现：
-
text-orientation: upright要显式声明：否则 Chrome/Firefox 会把英文、数字、括号等自动旋转90°，导致 API 名、版本号（如v2.1）变成侧躺状态 - 容器的
width和height含义会互换：width变成实际“行长”，height变成“列高”，设死height: 200px容易截断内容 - IE11 不识别
vertical-rl，只能回退到旧语法-ms-writing-mode: tb-rl，且不支持text-orientation
text-orientation 的 mixed 和 upright 怎么选
text-orientation 决定单个字符是否旋转，它和 writing-mode 是协作关系，不是可有可无的装饰：
-
mixed（浏览器默认）：汉字直立，拉丁字母/数字自动顺时针转90°，但标点行为不一致——Chrome 把顿号、当作中文处理，Firefox 有时把它当西文旋转，导致对齐错位 -
upright：所有字符强制直立，适合含较多英文术语、代码片段或缩写（如HTTP、JSON）的场景，视觉更统一 - 别用
sideways：整行侧躺，基本只在极少数实验性设计中出现，无实用价值
line-height 和 padding 在竖排下反直觉的映射规则
竖排后，CSS 盒模型的方向逻辑彻底翻转，line-height 和 padding 的作用方向也跟着变：
-
line-height: 1.4的数值含义没变，但“行”现在是垂直方向，所以它控制的是字与字之间的**纵向间距**；设line-height: 1容易让上下字粘连，尤其在小字号下 -
padding: 0 1em中的1em实际作用在左右两侧（即文字列的**外侧留白**），而0是上下（即首字顶部和末字底部）不留白 - 如果容器设置了
height，竖排内容溢出时不会自动换列，而是直接裁剪——建议改用min-height或去掉固定高度，让内容自然撑开
flex/grid 布局 + writing-mode 容易触发渲染异常
当 writing-mode 用在 flex 容器或 grid 项目里，部分浏览器会混淆主轴方向，导致子元素错位或尺寸计算错误：
- Firefox 对
display: flex+writing-mode: vertical-rl的处理较稳定，但 Safari 在嵌套 flex 容器中可能忽略align-items设置 - grid 布局中，
grid-template-columns和grid-template-rows的语义会与writing-mode冲突，比如grid-template-rows: 1fr 2fr在竖排下实际控制的是“列高”，极易误判 - 稳妥做法：竖排区域单独抽离为独立块级容器，内部用普通流布局；若必须嵌套，优先测试 Safari 17+ 和 Firefox 120+
真正麻烦的从来不是怎么写那一行 writing-mode，而是它悄悄翻转了整个盒模型的坐标系——padding、margin、甚至 scrollWidth 都得重新理解方向。稍不注意，就变成“看着写了，却不知道为什么不对”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
