CSS writing-mode 语法
在 CSS 中，writing-mode 是一个用于控制 “文本方向” 和 “块级元素布局方向” 的 CSS 属性。简单来说，它决定了文字是横着写，还是竖着写，以及文字行的流动方向。
语法：
writing-mode: 关键字;说明：
writing-mode 属性取值是一个关键字，如下表所示。
| 取值 | 说明 |
|---|---|
| horizontal-tb（默认值） | 横向书写，从左到右，行从上到下（适合英文、拉丁文等西方语言） |
| vertical-rl | 纵向书写，从右到左，行从上到下（适合中文、日文传统排版） |
| vertical-lr | 纵向书写，从左到右，行从上到下（不常用，但部分现代排版会使用） |
writing-mode 属性会影响以下方面：
- 文本方向：控制文字的书写方式是横排还是竖排。
- 块级元素的流向：控制块级元素在页面中的布局走向，例如 margin 和 padding 的方向。
- 行内元素的方向：比如 img、button 等行内元素在其容器中的排列方向。
- 配合 text-orientation 使用：在垂直布局中，text-orientation 可以进一步控制文字是否旋转）。
提示:
- 如果你想要实现竖排阅读、诗歌排版、书籍封面文字等布局，可以考虑使用 writing-mode: vertical-rl。
- 配合 text-orientation: upright; 可以让每个汉字不旋转地直立显示，常见于报纸、书籍等版式。
CSS writing-mode 摘要
| 属于 | CSS 盒子模型 |
|---|---|
| 使用频率 | 低 |
| 是否继承 | 是 |
| 默认值 | horizontal-tb |
| 兼容性 | 查看 |
| 官方文档 | 查看 |
| MDN | 查看 |
CSS writing-mode 示例
接下来，我们通过一个简单的例子来讲解一下 CSS writing-mode 属性是如何使用的。
示例：writing-mode 基本用法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
div { writing-mode: horizontal-tb; }
</style>
</head>
<body>
<div>
<h3>静夜思</h3>
<p>床前明月光</p>
<p>疑是地上霜</p>
<p>举头望明月</p>
<p>低头思故乡</p>
</div>
</body>
</html>页面效果如下图所示。
分析：
如果使用的是 writing-mode: vertical-lr;，此时页面效果如下图所示。
如果使用的是 writing-mode: vertical-rl;，此时页面效果如下图所示。
