【CSS in Depth 2 精译_018】3.1.2 逻辑属性 + 3.1.3 用好逻辑属性的简写形式

当前内容所在位置（可进入专栏查看其他译好的章节内容）

第一章层叠、优先级与继承（已完结）
1.1 层叠
1.2 继承
1.3 特殊值
1.4 简写属性
1.5 CSS 渐进式增强技术
1.6 本章小结

第二章相对单位（已完结）
2.1 相对单位的威力
2.2 em 与 rem
2.3 告别像素思维
2.4 视口的相对单位
2.5 无单位的数值与行高
2.6 自定义属性
2.7 本章小结

第三章文档流与盒模型
3.1 常规文档流（已完结）
3.1.1 内容水平居中
3.1.2 逻辑属性 ✔️
3.1.3 用好逻辑属性的简写形式 ✔️

3.2 盒模型
3.2.1 避免魔术数值（精译中 ⏳）

3.1.2 逻辑属性

过去，文档流的默认行为会给需要翻译成特定语言的网站造成困难。常规流是按从左至右、从上到下的方向流动的，这是因为包括英语在内的绝大多数语言都是这样书写的。但是，为了让“万维”网（“world-wide” web）能够真正名符其实地对全世界开放，就必须兼容书写方式各不相同的其他语言，包括从右向左阅读的语言（如阿拉伯语、希伯来语），以及垂直书写的语言（如日语、繁体中文）。W3C 联盟为此投入了大量工作，最终为 CSS 成功引入了 逻辑属性（logical properties） 的概念。

定义

逻辑属性 为元素流向的处理提供了一种新的思路。它是针对块级元素和行内元素对应的方向而言的，而这些方向又是随不同语言的书写习惯而动态变化的。这样就无需生硬地指定元素上、下、左、右的尺寸以及宽高的具体大小了。

使用逻辑属性时，之前的水平方向与垂直方向的概念，分别被 行内基准方向（即 inline base direction，表示文字在行内的流动方向）和 块级流动方向（即 block flow direction，也就是段落等盒型元素自然堆叠的方向）所取代。要设置的属性不再是 width，而是 inline-size。二者虽然在水平书写模式下效果完全相同，但在垂直书写模式下 inline-size 可用于指定高度；同理，高度 height 也无需设置了，取而代之的是 block-size 属性：它也可以在垂直书写模式下设置宽度。

逻辑属性还将以往的 “上（top）、右（right）、下（bottom）、左（left）” 换成了 开始（start） 和 结束（end）。因此，padding-left 和 padding-right 分别变为 padding-inline-start 和 padding-inline-end；border-top 和 border-bottom 则分别变为 border-block-start 和 border-block-end——这些属性的含义会根据书写模式的不同而重新动态调整。

图 3.5 列举了块级方向与行内方向在各种书写模式下的文档流向。箭头从每个维度方向的“开始（start）”指向“结束（end）”。图中用 border-inline-start 加粗了每个示例中的某一个边框，以强调其行为特征。

图 3.5 行内元素与块级元素在各种书写模式下的文档流方向

要适应这些逻辑属性，关键是得熟悉这些新的叫法。改变原有的页面布局大可不必，换掉那些习以为常的术语即可。至于适应多种书写模式及语言的问题，还是留到真要翻译页面内容的时候再说吧；在使用逻辑属性的前提下，如果布局方案能在从左到右书写的、熟悉的语言中奏效，那么一旦书写模式改变，该布局方案也会随之调整。

工作中只用到一种语言，是否还需要逻辑属性？

这取决于您的工作和生活环境。创建可以支持其他书写模式的网站，这样的场景可能并不多见。即便如此，理解逻辑属性的工作原理仍然非常重要，原因有三——

逻辑属性是 flexbox 布局和 grid 布局中众多核心概念不可或缺的前期储备知识（本书将在后续两章中深入探讨这些布局概念）；
一些逻辑属性是没有对应的传统属性的，但有时用起来往往更加方便；
随着逻辑属性在行业中的应用日益广泛，正确理解遇到的新样式写法也尤为重要。

实际工作中，如果正在开发的网站无需切换书写模式，那么究竟是用逻辑属性还是传统属性，亦或是将二者有机结合，都完全可以由您自行决定。即使是在多语言场景下，有时可能也需要用到一些传统属性，例如要让新增的样式效果在任何书写方向上都保持一致的时候。

如果您一直在用浏览器的 DevTools 工具检查页面元素，可能都已经注意到了，用户代理样式表在处理默认外边距时用到了逻辑属性；处理列表元素时也使用了 inline-start 风格的内边距；类似的情况还出现在了其他一些属性中。

在层叠规则中，传统属性及其对应的逻辑属性可以相互覆盖。因此，如果对列表设置了左内边距 padding-left，则会覆盖用户代理样式中的 padding-inline-start 样式；相反，也可以使用 margin-block-start 和优先级更高的选择器来覆盖优先级较低的 margin-top 样式。也就是说，这两种方法可以在样式表中相互交换，并且仍然可以获得可预测的效果。

几乎所有与垂直或水平样式相关的 CSS 属性（property）都有对应的逻辑属性。这样一来，您就可以基于当前语言的具体特征来定义页面布局。以下罗列了部分常见的传统属性和取值、及其对应的逻辑属性的写法和取值情况：

width / inline-size
height / block-size
margin-top / margin-block-start
margin-bottom / margin-block-end
margin-left / margin-inline-start
margin-right / margin-inline-end
text-align: left / text-align: start
text-align: right / text-align: end
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

以上列表只展示了一部分情况，但足以清楚演示这种新的写法了。通过使用 block/inline 与 start/end，您所熟悉的传统样式属性写法都可以切换成对应的等效逻辑属性。关于逻辑属性的全面介绍，请参阅 https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Logical_Properties。

3.1.3 用好逻辑属性的简写形式

某些逻辑属性恰巧为常见的样式设置提供了简写形式。例如，margin-inline 可以一次性设置起始（左侧）和结束（右侧）外边距、而无需设置上下两侧的外边距。使用 margin-inline: 2rem 可以将起止外边距（即左外边距与右外边距）同时设为 2rem；或者使用 margin-inline: 2rem 4em 将开始（左）外边距设为 2rem，并将结束（右）外边距设为 4em。同理，margin-block 也可以通过设置块级元素外边距的起止样式来简化传统的上下外边距，类似的属性还包括 padding-inline、padding-block、border-inline 以及 border-block。传统的经典 CSS 属性是没有这样的行为特征的。

这种写法能让之前介绍的双容器模式更加简洁。按照代码清单 3.4 更新样式表，注意代码还包括将 max-width 属性替换为对应的逻辑属性 max-inline-size：

代码清单 3.4 将逻辑属性应用于双容器模式

.page-header h1 {
  max-inline-size: var(--column-width); /* max-width 的等效逻辑属性 */
  margin-inline: auto; /* 将左右外边距设为 auto，而无需指定上下外边距 */
}
.container {
  max-inline-size: var(--column-width); /* max-width 的等效逻辑属性 */
  margin-inline: auto; /* 将左右外边距设为 auto，而无需指定上下外边距 */
}