CSS 逻辑属性简明教程本文介绍了 CSS 逻辑属性的出现的背景以及解决的问题，并带大家了解了常用 CSS 逻辑属性有哪

在平时使用 Ant Design 库开发网页时，有观察到组件样式上有使用 CSS 逻辑属性（CSS logical properties）的地方，灵机一动就收看了一下浏览器兼容性支持，发现已经普遍支持了。

链接：caniuse.com/css-logical…

Chrome 已经在 89 版本中就已经全面支持了，另外我们公司内部最低测试版本是 Chrome 90，也就是说，现在可以安全地使用 CSS 逻辑属性了，那就没有理由不学不用了。

关于 CSS 逻辑属性

在传统的 CSS 中，我们通常使用物理维度的关键字来定位和布局元素。例如，行内方向上的 left 和 right，垂直方向的 top 和 bottom，这些属性是基于物理的屏幕坐标定义的。

随着互联网的全球化发展，网页需要支持多种语言和不同的书写模式，如从右到左的阿拉伯语或垂直书写的某些亚洲语言。这个时候再依赖物理属性来进行布局，就显露出弊端了。

CSS 逻辑属性则通过引入了 inline、block 逻辑概念移除物理空间的概念。这里的 inline 可以简单理解行内文本流动的方向，block 可以简单理解文本折行时流动的方向。

inline、block 受到语言环境和书写模式的 2 方面影响，对应 CSS 上，分别对应 direction 属性和 writing-mode 属性。

writing-mode 的默认值是 horizontal-tb，tb 就是 top-bottom，也就是默认文档流是水平方向、从上到下的
至于水平方向上是从左到右、还是从右到左，则要看 direction，direction 默认值 ltr 也就是 left 到 right

也就是说默认文档流（中英文环境）下，inline 是从左到右的，此时 inline start 表示左，inlint end 表示右；而在从右到左的阿拉伯语语境下，水平文本是从右到左流动的，这个时候，inline start 和 inline end 的含义就颠倒了——inline-start 在右，inline end 在左。

而在垂直书写模式下，例如 writing-mode: vertical-rl 的日语环境，inline 的含义又变了：

writing-mode: vertical-rl 表示默认文档流是垂直（行内）、从右到左的（折行时）。至于垂直方向文本流向，在 direction 没被设置的默认情况下，是从上到下的。

如上图所示：日语环境下，inline start 表示上（top），inline end 表示下（bottom）。

与 inline 概念相对的，就是 block——block 的方向始终与 inline 垂直，理解了 inline，也就理解了 block。

从上面的介绍你就看到，CSS 逻辑属性的用场——如果你家站点需要支持国际化，当然，这种国际化可不单纯是把中文翻译成其他国家方言就行了，还要顾虑到排班和布局，如果还是用物理关键字 width/height/left/right/top/bottom 的话，就很痛苦了，这个时候就只能靠逻辑属性了。

常用逻辑属性介绍

理解了 CSS 逻辑属性的出现背景以及相关概念，下面就来看看如果将物理属性更新成逻辑属性。

注：方便起见，以下讲述基于默认文档流模式，即从左到右，从上到下。

基本上可以按照以下规则更新我们的物理属性：

left 变为 inline-start
1. 例如：margin-left 变 magin-inline-start，padding-left 变 padding-inline-start
right 变为 inline-end
1. 例如：margin-right 变 magin-inline-end，padding-left 变 padding-inline-end
top 变为 block-start
1. 例如：margin-top 变 magin-block-start，padding-top 变 padding-block-start
bottom 变为 block-end
1. 例如：margin-bottom 变 magin-block-end，padding-bottom 变 padding-block-end