2020 年带来了 另一波逻辑属性功能 到主要的浏览器，我非常享受我投资于逻辑而不是物理的网页样式。我觉得我学会了一种新的方式来谈论盒子模型，它可以减少代码量，并提供更广泛的覆盖范围。
p {
/* 🚫 */ text-align: left;
/* 👍 */ text-align: start;
/* 🚫 */ margin-top: 1rem;
/* 👍 */ margin-block-start: 1rem;
}就像我在上面链接的 web.dev 文章中描述的那样，逻辑属性 是一个引用盒子模型的边、角或轴，并根据适用语言的方向进行参考。它类似于引用某人的强壮手臂，而不是假设它是他们的右手臂。“右手”是一个物理手臂引用，“强壮”是一个逻辑手臂引用，与个人相关。
当我掌握了更新的语法后，我意识到世界上其他地方已经用类似的方式解决了他们的问题！网络只是在逻辑术语上迟到了。以下是一些已经采用逻辑的其他地方。
航海方向
左舷和右舷是船的逻辑侧，与船舶相关。我喜欢维基百科 充满自信地说
…航海方向术语明确地处理船舶结构，分别指船舶左右两侧，由船上观察者向前方看去。”
以船舶为中心的逻辑属性。在处理船舶时，使用船舶语言。
滑雪者和阶段
滑雪者的左侧 是一个基于滑雪者面向山下的逻辑方向。如果没有逻辑语言，滑雪者会混淆左右，因为这取决于他们在声明方向时站立的位置。如果你在缆车上面向山顶，在你下缆车开始下山后，左就是右，右就是左。因此，这个群体想出了一个逻辑的方法来谈论方向。他们的术语，“滑雪者的右侧”和“滑雪者的左侧”，本质上是上下文相关的逻辑属性。在与滑雪者一起工作时，使用滑雪者的语言。
同样地，电影制片厂使用“第一阶段”和“第二摄影机”之类的术语。它有助于基于共同的理解而不是相对方向对每个人进行逻辑定位。
逻辑结论
作为一个行业或社区，我们一直存在着以物理为中心的样式问题。在按钮的左侧和右侧添加填充只在某些语言中合适。这就像你在船上朝错误的方向看时写了填充一样。逻辑属性，通过 inline-start 和 inline-end，将适合所有语言。无论你在船上朝哪个方向看，都与你无关了。
在下面的 Pen 中尝试使用逻辑属性。注意浏览器正在努力确保你的内容在全球范围内可读。太棒了。
button {
padding-block: 1ch;
padding-inline: 2ch;
border-inline: 5px solid var(--brand-1);
}为了效仿维基百科对航海逻辑方向的自信：我们，网络，现在可以明确地处理我们盒子的结构，分别指他们的边，与语言方向相关。描述一次边，以一种对你仍然相关的方式，但现在也对其他人相关。少思考，多做。
p {
max-inline-size: 50ch;
margin-block: 1rem;
}对我来说，重要的是逻辑属性以人为中心。它是以用户为中心的，因为它是与语言方向相关的。通过使用逻辑属性，我们邀请个人将他们的多样性、复杂性和不可预测性带到桌面上；我们可以接受它，并依靠浏览器引擎来正确地布局。
hr {
max-inline-size: 30ch;
margin-inline: auto;
border-block-start: 1px solid hsl(2rad 20% 20% / 20%);
}放弃“顶部”和“左侧”的思维方式，开始用“块”和“开始”之类的逻辑属性进行思考。在处理网页盒子时，使用网页盒子的语言。
网络的“神奇纸张”现在变得更加神奇，因为它可以尽可能地保持对用户的自然性。我喜欢它。
附注：你从 flexbox 开始就一直在接受逻辑属性的训练。