现在跨浏览器支持已达到临界点，是时候了解一下逻辑属性和值了。如果您正在创建多种语言的网站，逻辑属性和值非常有用。即使您没有，也有一些方便的新速记值得了解。
例如，我记不清有多少次我写过这段代码来居中某个元素
.thing {
margin-left: auto;
margin-right: auto;
}我们可以使用类似 margin: 0 auto; 的方法将其写成一行代码，但这样上下边距也会被包含进来。相反，我们可以使用 margin-inline 逻辑属性仅选择左右边距。
开始将事物视为“内联”或“块级”
最后一个演示非常棒，对吧？margin-inline 属性同时设置了 margin-left 和 margin-right。类似地，margin-block 属性同时设置了 margin-top 和 margin-bottom。而且我们不仅仅是在谈论边距。逻辑属性具有类似的速记来设置 border 和 padding。因此，如果您有一个视觉设计要求仅在侧面设置边框，则可以使用 border-inline，而不是单独处理每个物理方向。
因此，随着我们继续前进，我们现在知道我们正在处理内联和块级方向，而不是物理方向。内联处理左右方向，而块级管理上下方向。
也就是说，直到书写模式改变时，情况才会发生改变。
注意方向和书写模式
我们到目前为止看到的都是 CSS 逻辑属性的示例。这些是 CSS 属性的版本，例如 margin 和 padding，但以一种新的方式编写，避免了物理方向（即左、右、上、下）。
CSS 的开发是考虑到英语语言的，英语是从左到右书写和阅读。但并非所有语言都是如此。例如，阿拉伯语是从右到左阅读。这就是 HTML 具有 dir 属性的原因。
<html dir="rtl">CSS 有一个等效的属性（尽管建议使用 HTML 属性以防 CSS 无法加载）
.foreign-language { direction: rtl; }
中文、日文、韩文和蒙文可以从左到右水平书写，也可以从上到下垂直书写。这些语言中的大多数网站都是水平书写的，与英语相同。
相比之下，垂直书写方式在日语网站上更为常见。有些网站同时使用垂直和水平文本。
垂直书写时，中文、日文和韩文以右上角为起点，而蒙古文则从左到右阅读。这正是 CSS 中存在 writing-mode 属性的原因，该属性包含以下值
horizontal-tb：这是默认值，将英语或法语等语言的方向设置为从左到右，将阿拉伯语等从右到左的语言的方向设置为从右到左。tb代表“从上到下”。vertical-rl：这将中文、日文和韩文等语言的方向更改为垂直方向的从右到左。vertical-lr：这用于蒙古语等垂直方向的从左到右的语言。
CSS 逻辑属性提供了一种编写上下文相关的 CSS 的方法。使用逻辑属性时，间距和布局取决于 writing-mode 和方向（无论由 CSS 还是 HTML 设置）。因此，可以在不同的语言之间重用 CSS 样式。例如，BBC 新闻在其 10 多种语言中重建了他们的网站。这比让用户依赖自动翻译提供了更好的体验。这也意味着他们可以更好地为世界不同地区提供特定内容。但是，视觉样式在不同地区之间基本保持相同。
让我们看下面的示例，了解物理属性的不足之处。使用物理 margin-left 属性（以红色显示），在英文中一切看起来都很好。如果您要重用 CSS 但将书写模式更改为 rtl（底部显示），则文本和图标之间没有空格，并且文本左侧有额外的空白。我们可以通过使用逻辑属性来避免这种情况。
逻辑属性和值之所以如此有用，是因为它们会自动适应语言的上下文。在像英语这样的从左到右的语言中，margin-inline-start 将设置左侧边距。对于像阿拉伯语、乌尔都语或希伯来语这样的从右到左的语言，它将设置右侧边距——这 解决了上述示例中的布局问题。从右到左的问题解决了。如果您有垂直文本，margin-inline-start 也会适应该上下文，在顶部添加边距，这是您在任何垂直语言中开始阅读的位置（这就是它被称为 margin-inline-start 的原因——只需考虑您从哪个方向开始阅读）。inline 的方向根据元素的 writing-mode 更改。当设置垂直 writing-mode 时，它处理垂直方向的上下。看到事情是如何发生变化的吗？
逻辑属性和值的完整列表
有几十个 CSS 属性具有逻辑替代语法。Adrian Roselli 创建了一个方便的可视化工具，您可以在我们常用的物理 CSS 属性及其逻辑属性等效项之间切换。这是一种很好地可视化逻辑属性及其在方向为 ltr 且 writing-mode 为 horizontal-tb 时映射到的物理属性的方式。
让我们更进一步地分解这些内容，并将每个物理 CSS 属性与其逻辑对应项并排映射。本文中显示的表格在左侧列显示传统的物理 CSS，在右侧列显示其逻辑等效项（使用从左到右的水平映射）。但是请记住，逻辑属性的全部意义在于它们会根据上下文发生变化！
大小
在水平书写模式下，inline-size 设置元素的宽度，而 block-size 设置高度。在垂直书写模式下，情况正好相反：inline-size 设置高度，block-size 设置宽度。
| 物理属性 | 逻辑属性 |
|---|---|
width | inline-size |
max-width | max-inline-size |
min-width | min-inline-size |
height | block-size |
max-height | max-block-size |
min-height | min-block-size |
用于大小调整的逻辑属性具有 良好的跨浏览器支持。
边框
此处的所有内容在现代浏览器中都具有可靠的 跨浏览器支持。
| 物理属性 | 逻辑属性 |
|---|---|
border-top | border-block-start |
border-bottom | border-block-end |
border-left | border-inline-start |
border-right | border-inline-end |
以下是用英语、阿拉伯语和中文显示的 border-inline-start 的示例。
以下是一个将 border-block-start 设置为点状，并将 border-block-end 设置为虚线的示例
还有一些逻辑属性可以分别设置边框颜色、宽度和样式
| 物理属性 | 逻辑属性 |
|---|---|
border-top-color | border-block-start-color |
border-top-width | border-block-start-width |
border-top-style | border-block-start-style |
因此，再次强调，关键在于用“内联”和“块级”来思考，而不是用物理方向，例如 left 和 top。我们还有一些边框的逻辑速记属性
| 物理属性 | 逻辑属性 |
|---|---|
border-top 和 border-bottom | border-block |
border-left 和 border-right | border-inline
|
外边距
以下是所有单独的逻辑margin属性
| 物理属性 | 逻辑属性 |
|---|---|
margin-top | margin-block-start |
margin-bottom | margin-block-end |
margin-left | margin-inline-start |
margin-right | margin-inline-end |
这些逻辑属性具有全面的现代跨浏览器支持，包括三星互联网，并且从 Safari 12.2 开始就得到支持。
并且，请记住，我们也有简写形式
| 物理属性 | 逻辑属性 |
|---|---|
margin-top 和 margin-bottom | margin-block |
margin-left 和 margin-right | margin-inline |
填充
填充与外边距非常相似。将margin替换为padding，我们就得到了相同的属性列表。
| 物理属性 | 逻辑属性 |
|---|---|
padding-top | padding-block-start |
padding-bottom | padding-block-end |
padding-left | padding-inline-start |
padding-right | padding-inline-end |
padding-top 和 padding-bottom | padding-block |
padding-left 和 padding-right | padding-inline |
与外边距一样，填充的逻辑属性也具有良好的跨浏览器支持。
定位
需要在特定方向上偏移元素的位置？我们也可以以逻辑方式声明这些位置。
| 物理属性 | 逻辑属性 |
|---|---|
top | inset-block-start |
bottom | inset-block-end |
left | inset-inline-start |
right | inset-inline-end |
top 和 bottom | inset-block |
left 和 right | inset-inline |
在水平书写模式（从左到右或从右到左）中，inset-block-start 等效于设置 top，而 inset-block-end 等效于设置 bottom。在水平书写模式下，从左到右的方向，inset-inline-start 等效于 left，而 inset-inline-end 等效于 right，反之亦然，适用于从右到左的语言。
相反，对于垂直书写模式，inset-inline-start 等效于 top，而 inset-inline-end 等效于 bottom。如果 writing-mode 设置为 vertical-rl，则 inset-block-start 等效于 right，而 inset-block-end 等效于 left。如果 writing-mode 设置为 vertical-lr，则情况相反，因此 inset-block-start 等效于 left。
| 逻辑属性 | 书写模式 | 等效于 |
|---|---|---|
inset-block-start | 水平 LTR | top |
inset-block-start | 水平 RTL | top |
inset-block-start | 垂直 LTR | left |
inset-block-start | 垂直 RTL | right |
以下是如何在四个不同的书写方向中查看相同的绝对定位 CSS 代码的示例
定位的逻辑属性在所有现代浏览器中都受支持，但最近才在 Safari 中推出。
还有一种新的简写形式，可以在一行代码中设置所有四个偏移量。以下是如何使用inset作为简写形式，在一举设置top、bottom、left和right以创建全屏覆盖层的示例
我听说inset被错误地称为逻辑属性。但是，在 DevTools 中快速查看一下就会发现，它实际上是物理值的简写形式，而不是逻辑属性。
它实际上是在定义物理偏移量（即左、右、上和下），而不是逻辑偏移量（即内联、块、开始和结束）。显然，如果您希望为所有四面设置相同的值，如上例所示，则无关紧要。
inset: 10px 20px 5px 8px; /* shorthand for physical properties not logical properties */文本对齐
文本对齐的逻辑值拥有良好的浏览器支持，并且已经存在多年。在使用英语时，text-align: start与text-align: left相同，而text-align: end与text-align: right相同。如果您将dir属性设置为rtl，则它们会切换，text-align: start将文本对齐到右侧。
| 物理值 | 书写模式 | 等效于 |
|---|---|---|
start | LTR | left |
start | RTL | right |
end | LTR | right |
end | RTL | left |
圆角
到目前为止，我们所查看的所有内容都具有不错的浏览器支持。但是，还有一些其他逻辑属性的支持仍在开发中，圆角就是其中之一。换句话说，我们可以使用逻辑属性为元素的不同角设置不同的border-radius值，但浏览器支持并不理想。
| 物理属性 | 逻辑属性 |
|---|---|
border-top-left-radius | border-start-start-radius |
border-top-right-radius | border-start-end-radius |
border-bottom-left-radius | border-end-start-radius |
border-bottom-right-radius | border-end-end-radius |
值得注意的是，规范不包括简写属性，如border-start-radius和border-end-radius。但是，就像我说的，我们现在还处于早期阶段，所以这可能是一个值得关注的领域。
浮动
在撰写本文时，逻辑浮动的流相关值具有糟糕的浏览器支持。只有 Firefox 支持inline-start和inline-end作为float值。
| 物理值 | 逻辑值 |
|---|---|
float: left | float: inline-start |
float: right | float: inline-end |
clear: left | clear: inline-start |
clear: right | clear: inline-end |
其他逻辑属性
已提出用于overflow和resize的逻辑属性，但它们当前的浏览器支持非常糟糕。
| 物理 | 逻辑 |
|---|---|
resize: vertical | resize: block |
resize: horizontal | resize: inline |
overflow-y | overflow-block |
overflow-x | overflow-inline |
深入了解
我们探讨了将属性视为“逻辑”属性的含义，然后将所有新的逻辑属性和值映射到它们的物理对应项。这很棒！但是，如果您想更深入地了解 CSS 逻辑属性和值，则有一些值得查看的资源。
- “RTL 样式 101”（Ahmad Shadeed）：如果您正在处理阿拉伯语或其他从右到左的语言，这是一个很棒的资源。Ahmad 涵盖了所有内容，从逻辑属性到使用特定布局技术（如 flexbox 和网格）时的注意事项。
text-combine-upright（CSS-Tricks）：如果您正在处理垂直文本，您是否知道此属性可以旋转文本并将多个字符挤压到单个字符的空间中？在某些情况下，一些字符需要放在一起但仍然与垂直书写模式一起流动，这是一个很好的改进。
如果您想查看网络上一些不错的垂直排版实际示例，请查看水平和垂直书写网络奖项。里面有很多很棒的东西。
总结
您是否需要急于将所有物理属性从您的代码库中替换掉？不用。但这也不妨开始在您的工作中使用逻辑属性和值。正如我们所看到的，浏览器支持已经到位了。即使您正在处理一个仅使用英语的网站，也没有理由不使用它们。
我认为逻辑属性并不简短。开始、块开始、块结束……我想知道我们是否给 CSS 文件增加了更多权重。对我来说，方向左、右、上、下比开始和结束对边框、边距、填充更易于理解。
像左和右这样的物理方向相对于书写模式，当书写模式更改时会导致问题。这篇文章对此进行了相当广泛的介绍。
如果您有充分的理由保留物理方向而不是逻辑方向，我很乐意阅读（真诚地）。
尽管我提倡使用逻辑属性，但不幸的是，有时使用物理方向更有意义，例如在 RTL 文档内的 LTR 上下文中。
例如，如果您有一个电子邮件地址输入框（据我所知，它应该始终为 LTR），您在其上设置了
dir="ltr"，并且您还希望在其旁边显示一个图标，则padding-inline-start将应用于另一侧，因为 LTR 的方向性。因此，在这种情况下，使用类似
.parent:dir(rtl) .child { padding-right: 10px }的代码更有意义。@Ollie Williams
text-align-right 应该为 text-align: right
位于 https://css-tricks.org.cn/css-logical-properties-and-values/#positioning 下的第二个表格中有一个多余的撇号。
感谢这篇文章！
@tommy 显然。努力和回报。你会得到更好的结果，但你需要为此努力。
如果您使用 stylelint，此插件可以提供帮助：https://npmjs.net.cn/package/stylelint-use-logical-spec
我将其设置为在任何时候都警告我是否有可用的替代逻辑属性。
这样，我就可以在遇到每个新属性时学习，而不必尝试记住所有属性——这有点令人生畏。
仅供参考，Safari 即将为 float 和 clear 提供逻辑属性支持。
https://webkit.org/blog/11680/release-notes-for-safari-technology-preview-125/
不错的文章！感谢分享，我将把它翻译成中文，以便更多人阅读。