假设您有一个 <blockquote>，并且设计要求在左侧有一个粗边框。 嗯，您可能并不一定意味着 左侧，而是实际上意味着 文本开始的那一侧。
这正是 CSS 逻辑属性 所要解决的问题，Hussein Al Hammad 有一篇 不错的文章 说明了一些用例，包括我上面提到的 blockquote 问题。
通过使用逻辑属性，您不必费心手动编写包含 [dir="rtl"] 的选择器，也不需要了解书写模式等等。 盒模型相关内容（边框、填充、边距……）将在需要的地方进行调整。
Hussein 的 blockquote 是一个很好的入门示例，可以帮助您理解所有这些
blockquote {
/* Rather than... */
border-left: 4px solid #aaa;
padding-left: 1.75rem;
/* You'd do... */
border-inline-start: 4px solid #aaa;
padding-inline-start: 1.75rem;
}
查看 CodePen 上的
逻辑属性演示：blockquote，由 Hussein Al Hammad (@hus_hmd) 创建。
在 CodePen 上。
支持情况相当不错。
这些浏览器支持数据来自 Caniuse，其中包含更多详细信息。 数字表示浏览器从该版本开始支持该功能。
桌面
| Chrome | Firefox | IE | Edge | Safari |
|---|---|---|---|---|
| 89 | 66 | 不支持 | 89 | 15 |
移动设备/平板电脑
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 127 | 127 | 127 | 15.0-15.1 |
文章中有一个术语让我有点困惑，那就是“水平规则”。 我首先想到的是 <hr> 元素。 然后我想用逻辑属性反转设计方向。 通常，<hr> 只是一个线，所以水平方向无关紧要，但假设它就像包裹后新行开始的边缘上的一条 短 线。
我们可以用覆盖盒模型不同部分的背景来绘制这条短线，然后在填充应用的地方使用逻辑属性。 这是一种非常独特的边缘情况，但它很有趣，值得尝试
查看 CodePen 上的
具有方向感知能力的 <hr>，由 Chris Coyier (@chriscoyier) 创建。
在 CodePen 上。
如果我们有 逻辑渐变，那就更容易了。