时间：2026-05-28 编辑：
在传统的CSS学习中，我们接触的属性和值大多与显示器的物理方向紧密相关。例如，我们使用 top、right、bottom、left 来定位元素，使用 margin-top、padding-left 来设置间距，这些属性默认假设文本是从左到右、从上到下排列的。
这种假设对于英文、法文等语言是成立的，但对于阿拉伯语、希伯来语等从右向左书写的语言，或者日文、蒙古文等可以纵向书写的语言，传统的物理属性就无法很好地适应了。
随着互联网的全球化发展，CSS不断演进以更好地支持多语言环境。书写模式属性和逻辑属性的引入，使得开发者能够创建适应不同文本方向的布局，而不需要为每种语言单独编写样式。
本文将深入讲解书写模式的概念、逻辑属性的使用方法，以及它们对现代CSS布局的重要意义。
writing-mode 属性的三种取值书写模式指的是文本的排列方向是横向还是纵向。CSS中的 writing-mode 属性用于控制文本的流动方向，它有三种主要取值：
取值 | 文本排列 | 块级元素堆叠 | 适用语言 |
| 水平排列 | 从上到下 | 英文、中文等大多数语言（默认值） |
| 垂直排列 | 从右到左 | 传统日文、蒙古文等纵向书写语言 |
| 垂直排列 | 从左到右 | 某些特定排版场景 |
核心影响：
在horizontal-tb模式下，块级元素从上到下堆叠，块级方向是垂直的；行内元素从左到右排列，行内方向是水平的
当切换到vertical-rl模式时，整个坐标系发生了旋转
块级方向变成了水平方向，块级元素从右向左堆叠
行内方向变成了垂直方向，行内元素从上向下排列
现代布局基础：这意味着所有依赖于方向概念的CSS属性都会受到影响。现代CSS布局方法（如弹性盒和网格布局）都基于块级方向和行内方向的概念，而不是基于物理的上下左右。当你掌握了书写模式的工作方式，你就能够创建出真正适应任何文本方向的布局。
