Chromium 新增了逻辑属性简写和新的边衬区属性。
自 Chromium 69（2018 年 9 月 3 日）起，逻辑属性和值已帮助开发者通过逻辑（而非物理）方向和尺寸样式保持对国际布局的控制。Chromium 87 中新增了简写和偏移量，以便于编写这些逻辑属性和值。这会将 Chromium 捕获到 Firefox，而 Firefox 自 66 年以来就开始支持简写形式。Safari 已在技术预览中提供了这些预览。
文档流程
如果您已熟悉逻辑属性、内联轴和块轴，并且不想回顾相关知识，可以跳过部分。如果不是这样，下面我们简单回顾一下。
在英语中，字母和字词从左向右流动，而段落从上到下堆叠。 在繁体中文中，字母和单词从上到下排列，而段落则从右到左堆叠。在这两种情况下，如果我们编写的 CSS 会在段落上放置“上外边距”，则只能恰当地设置 1 种语言样式的间距。如果网页从英语翻译成繁体中文，在新的竖屏书写模式下，边距可能毫无意义。
因此，盒子的物理侧面在国际层面用处不大。从而开始了支持多种语言的过程；了解框模型的物理侧与逻辑侧。
您是否曾在 Chrome 开发者工具中检查过 p 元素？如果是，您可能会注意到默认用户代理样式不是物理样式，而是逻辑元素。
p {
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 0px;
margin-inline-end: 0px;
}
Chromium 用户代理样式表中的 CSS
外边距并不像英语读者想象的那样位于顶部或底部。
时间是block-start和block-end！这些逻辑属性类似于英语读者的顶部和底部，但也类似于日语读者的右侧和左侧。只需撰写一次，便可随时随地使用。
正常流程是指网页刻意加入这种多方向性机制。 当页面内容根据文档方向的变化而更新时，布局及其元素会被视为流畅性。请参阅 MDN 或 CSS 显示模块规范，详细了解数据流的“入”和“出”。虽然逻辑属性不一定是数据流的必要条件，但随着方向性的改变，它们可以为您完成很多繁重工作。 流程表示方向，即字母、字词和内容需要沿途移动。这会使我们实现阻塞和内嵌逻辑方向。
区块方向是新内容块所遵循的方向，例如询问自己“下一段落该放在哪里？”。您可以将其视为“内容块”或“文字块”。
每种语言都会按照其各自的 block-axis 排列它们的代码块并进行排序。block-start 是段落最先放置的一侧，而 block-end 是新段落流向的一侧。
例如，在传统的日语手写中，方块方向从右向左流动：
内嵌方向是指字母和字词的移动方向。撰写书写时，请考虑您的手臂和手的移动方向；它们沿着 inline-axis 移动。inline-start 是开始写入的一侧，而 inline-end 是写入结束或结束的一侧。在上面的视频中，inline-axis 从上到下，但在下一个视频中，inline-axis 从右向左流动。
成为 flow-relative 意味着为一种语言编写的样式将与上下文相关，并适当地应用于其他语言。内容将根据传送语言进行显示。
新的简写形式
下面的一些简写形式不是浏览器的新功能，而是利用能够在块边缘或内嵌边缘上同时设置值来简化样式编写方式。inset-* 逻辑属性确实带来了新功能，因为在绝对位置之前，无法通过逻辑属性指定绝对位置。不过，边衬区和简写文字的流动效果非常好，我现在就向大家介绍一下 Chromium 87 中推出的所有新逻辑属性功能。
利润率简写
虽然没有推出任何新功能，但一些超便捷的简写形式确实应该具备：
margin-block 和 margin-inline。
margin-block-start: 2ch; margin-block-end: 2ch;
margin-block: 2ch; /* or */ margin-block: 2ch 2ch;
现在，“顶部和底部”或“左侧和右侧”都没有简写形式！
您可能使用 margin: 10px; 的简写形式引用所有 4 个面，现在您便可以使用逻辑属性简写形式轻松引用 2 个互补边。
margin-inline-start: 4ch; margin-inline-end: 2ch;
margin-inline: 4ch 2ch;
内边距简写
我们没有推出任何新功能，但提供了更方便的简写形式：
padding-block 和 padding-inline。
padding-block-start: 2ch; padding-block-end: 2ch;
padding-block: 2ch; /* or */ padding-block: 2ch 2ch;
还有一组 inline 免费的简写形式：
padding-inline-start: 4ch; padding-inline-end: 2ch;
padding-inline: 4ch 2ch;
插入和简写
物理属性 top、right、bottom 和 left 均可写为 inset 属性的值。position 的任何值都可以从带有边衬区的设置边受益。
.cover {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
inset: 0;
}
position: absolute; top: 1px; right: 2px; bottom: 3px; left: 4px;
position: absolute; inset: 1px 2px 3px 4px;
看起来非常方便！边衬区是物理边的简写，其运作方式与外边距和内边距类似。
新功能
与物理端简写一样，这同样令人兴奋，额外的 inset 简写形式带来的逻辑特征会带来更多内容。这些简写形式可为开发者带来编写便利（输入时间较短），而且因为它们是相对流动的，因此也能扩大布局的潜在覆盖面。
position: absolute; top: 10px; bottom: 10px;
position: absolute; inset-block: 10px;
position: absolute; left: 10px; right: 20px;
position: absolute; inset-inline: 10px 20px;
在 MDN 上提供了更多信息以及边衬区简写形式和简写形式的完整列表。
边框简写
Border 及其嵌套的 color、style 和 width 属性也具有新的逻辑简写形式。
border-top-color: hotpink; border-bottom-color: hotpink;
border-block-color: hotpink; /* or */ border-block-color: hotpink hotpink;
border-left-style: dashed; border-right-style: dashed;
border-inline-style: dashed; /* or */ border-inline-style: dashed dashed;
border-left-width: 1px; border-right-width: 1px;
border-inline-width: 1px; /* or */ border-inline-width: 1px 1px;
您可以在 MDN 上了解更多信息以及完整的边框简写形式和简写形式列表。
逻辑属性 <figure> 示例
我们来看一个小例子。逻辑属性可以设置带图片说明的图片布局，以处理不同的写入和文档方向。
或者尝试一下！
借助 <figure> 和一些逻辑属性，您无需执行太多操作即可让卡片在全球范围内响应。如果您想知道这些国际知名的 CSS 是如何协同工作的，不妨先看看这段小小的实用介绍。
Polyfill 和跨浏览器支持
级联或构建工具是两种可行的方案，可同时保留旧式和新式浏览器，并以更新后的逻辑属性适当间隔。对于级联回退，请遵循具有逻辑属性的物理属性，浏览器将使用它在样式解析过程中找到的“最后一个”属性。
p {
/* for unsupporting browsers */
margin-top: 1ch;
margin-bottom: 2ch;
/* for supporting browsers to use */
/* and unsupporting browsers to ignore and go 🤷♂️ */
margin-block: 1ch 2ch;
}
不过，这并非适合所有人的全面解决方案。下面是一个手写回退，它利用 :lang() 伪选择器定位特定语言，适当调整其物理间距，然后在最后提供逻辑间距以支持浏览器：
/* physical side styles */
p {
margin-top: 1ch;
margin-bottom: 2ch;
}
/* adjusted physical side styles per language */
:lang(ja) {
p {
/* zero out styles not useful for traditional Japanese */
margin-top: 0;
margin-bottom: 0;
/* add appropriate styles for traditional Japanese */
margin-right: 1ch;
margin-left: 2ch;
}
}
/* add selectors and adjust for languages all supported */
:lang(he) {…}
:lang(mn) {…}
/* Logical Sides */
/* Then, for supporting browsers to use */
/* and unsupporting browsers to ignore #TheCascade */
p {
/* remove any potential physical cruft.. */
margin: 0;
/* explicitly set logical value */
margin-block: 1ch 2ch;
}
您还可以使用 @supports 确定是否提供物理属性回退：
p {
margin-top: 1ch;
margin-bottom: 2ch;
}
@supports (margin-block: 0) {
p {
margin-block: 1ch 2ch;
}
}
Sass、PostCSS、Emotion 和其他产品具有自动打包器和/或构建时产品，具有各种回退或解决方案。请查看每一种工具，看看哪些工具与您的工具链和整体网站策略相匹配。
后续步骤
更多 CSS 将提供逻辑属性，但目前这还远远不够！不过，此 GitHub 问题缺少一部分简写形式，因此尚有待解决的问题。有一个临时解决方案处于草稿状态。如果您想使用简写形式为框的所有逻辑边设置样式，该怎么办？
margin: 1px 2px 3px 4px; margin: 1px 2px; margin: 2px;
margin: logical 1px 2px 3px 4px; margin: logical 1px 2px; margin: logical 2px;
当前的方案草稿意味着您必须在每个简写形式中写出 logical，以便应用逻辑等效项，这听起来对某些形式并不很“干燥”。
其他提议在块或页面级别对其进行更改，但这可能会将逻辑用途泄漏到仍假定物理侧的样式中。
html {
flow-mode: physical;
/* or */
flow-mode: logical;
/* now all margin/padding/etc references are logical */
}
/* hopefully no 3rd/1st party code is hard coded to top/left/etc ..? */
这题有点难！投票、发表您的意见，我们期待收到您的反馈意见。
想要更多地学习或研究逻辑属性？MDN 上提供了详细的参考信息以及指南和示例 🤓?