自Web诞生以来，我们一直习惯于物理CSS属性，比如我们都知道使用margin-top、margin-right、margin-bottom和margin-bottom来设置元素的外边距，但随着书写模式特性的出现，这些物理特性，比如上、右、下和左的概念已经失去了它们的意义。特别是随着越来越多的Web开发人员要处理国际化业务，那么以前的物理特性已经无法满足业务的需求。换句话说，为了具有不同编写模式的多种语言设计页面时，开发人员必须跨多个元素分别调整这些物理属性，这也成了Web开发者的噩梦。幸运的是，CSS的逻辑属性的出现，可以让开发者根据书写模式来维护布局的完整性。即，根据内容的语义顺序进行动态更新。今天这篇文章，我们将和大家一起来探讨CSS的逻辑属性。

什么是逻辑属性

2017年5月18日，W3C的 CSS工作组（CSS Working Group） 发布了 CSS逻辑属性和值（CSS Logical Properties and Values Level 1） 的首份工作草案（First Public Working Draft）。不同的书写模式（writing mode）中，可以抽取出共性的抽象概念（如开始位置，或行），这些逻辑抽象概念需要在不同书写模式下映射到左或右、上或下等物理的概念上。一些CSS布局可能依赖这些共性的逻辑概念。该 CSS 模块给出了用于通过逻辑方式（而不是基于物理坐标、书写方向和维映射等）控制布局的逻辑属性和取值（logical properties and values）。这个模块来源于CSS21中关于逻辑属性和值的特性。

在过去（CSS逻辑属性还未到来之前），在CSS中来描述元素盒模型、位置等特性都是采用的物理属性（比如元素的尺寸，方向等），比如我们熟悉的元素位置会映射到top、right、bottom和left。在盒模型中都以物理属性为中心，不管是margin、padding、border还是position、float等。

除了top、right、bottom和left之外的width和height都是物理属性之一，比如我们描述一个盒子的大小，就是用width和height为描述的。但是这些属性和书写模式有着很大的关系，因为书写模式可以直接改变其方向。假设你的网站上有一些从右到左（RTL）的内容，那么左边可能是物理上的右边，因此你要是设置了margin-left: 100px，你可能希望将其替换为margin-right: 100px。但是，如果同时使用从左到右（LTR）和从右到左（RTL）混合，则需要根据不同的CSS属性来设置左或右。如果你考虑垂直写作模式，也会遇到类似的问题，内容可能是物理上的顶部（top）或底部（bottom）。

但在逻辑属性中却不一样，在逻辑属性中没有方向性的概念，只有开始（start）和结束（end）、块（block）和内联（inline）的概念。比如说，在从左到右（LTR）中，start是left，但在从右到左（RTL），它是right。也就是说，逻辑属性更易于适应不同的书写模式。

书写模式

虽然说，在Web排版的时候，我们习惯了从左到右（LTR）的排版，但当你的业务要面对多语言的场景时，你会发现除了熟悉的从左到右的排版之外，你还需要处理从右到左（RTL），从上到下等排版。

在Web开发中，HTML的dir属性取值为ltr可以实现从左到右排版，rtl可以实现从右到左排版。在CSS中的direction属性和dir属性类似，可以定义内联内容在屏幕上的流动方式（排版方式），即ltr是从左到右排版，rtl是从右到左排版。除此之外，CSS中的writing-mode属性除了可以义定内联内容在屏幕上的排版方式之外，还可以定义块内容在屏幕上的排版方式。该属性可以取值：

• horizontal-tb：定义了内容从左到右水平流动，从上到下垂直流动。下一条水平线位于上一条线下方
• vertical-rl：定义了内容从上到下垂直流动，从右到左水平流动。下一条垂直线位于上一行的左侧
• vertical-lr：定义了内容从上到下垂直流动，从左到右水平流动。下一条垂直线位于上一行的右侧
• sideways-rl：定义了内容从上到下垂直流动，所有字形，甚至是垂直脚本中的字形，都设置在右侧
• sideways-lr：内容从上到下垂直流动，所有字形，甚至是垂直脚本中的字形，都设置在左侧

就拿上面示例上的圆角来说，如果采用以前我们熟悉的物理属性来描述border-radius的值，那么在不同书写模式下，它的值将要根据不同的模式进行调整：

.card__heading {
    border-radius: 6px 6px 0 0;
}

[data-lang="Japanese"] .card__heading{
    border-radius: 0 6px 6px 0;
}

[data-lang="Mongolian"] .card__heading{
    border-radius: 6px 0 0 6px
}

这就是物理属性在多语言布局中带来的局限性，幸运的是，逻辑属性将彻底解决这一切烦恼。

逻辑属性与物理属性及逻辑值与物理值

CSS中布满了物理位置的关键词，比如我们熟悉的top、right、bottom和left。在使用position非static值对元素盒子定位时，就要使用这些物理位置来描述元素盒子的偏移量。

另一个用到物理关键词的地方是使用text-align控制文本对齐方式，比如取值为right时文本会右对齐，这也是CSS中的物理属性。当我们为项目增加外边距（margin）、内边距（padding）和边框（border）时会使用像margin-left、padding-left这样的物理属性。

把这些关键词称为物理属性，是因为它们与你看到屏幕紧密相关，左永远是左，不管文本流动的方向如何。

在开发有多种语言的网站时，如果其中包含了从右侧而不是从左侧开始书写的文字，物理属性就会成为一个问题。浏览器很擅长处理文本方向，不需要真的在一种 rtl （从右到左）的语言下开发，我们也可以一窥究竟。下面的例子里有两个段落，一个段落没有设置 text-align 属性，另一个段落的 text-align 设置为 left。在 html 元素上添加 dir="rtl" 声明，就会把书写模式从默认的 ltr （从左到右）的英语切换为 rtl （从右到左）的语言。我们可以看到，第一段仍然是从左到右显示，因为 text-align 的值为 left，但第二段把文字的流动方向切换成了从右到左。

这只是在使用物理属性和值时引起问题的一个非常简单的例子，它们阻止浏览器切换书写模式，因为这些物理属性和值已经假设文字的流动方向一定是从左到右、从上到下的。

逻辑属性和值不会预设文字方向，这也是为什么在网格布局中要实现对齐到容器的开始位置时使用 start 关键字的原因。对我来说，因为我使用英语工作，所以 start 就是左侧，不过它并不总是代表左侧，并不能根据 start 这个词推断出物理位置。

为什么需要逻辑属性

传统CSS根据屏幕的物理尺寸来定义元素的尺寸、位置，这些值都是物理尺寸。因此，我们使用CSS将元素（盒子）描述为具有宽度（width）和高度（height），用top、right、bottom和left来描述元素的位置。而CSS逻辑属性和值定义了这些物理值到它们的逻辑或流相关的映射，例如用开始和结速来描述左和右，顶部和底部。

为什么需要这些映射呢？我们来看一个简单地示例：

<h2>City Lights in New York</h2>
<h2>أضواء المدينة في نيويورك</h2>

如果仅仅按物理属来给标题定义一个左边框以及内容距左边框内距，往往会这样来描述：

h2 {
    border-left: 6px double currentColor;
    padding-left: 5vh;
}

对阅读模式来说，上面的样式适合于英文排版，但对于阿拉伯语来说，上面的样式设置就不太适合，因为阿拉伯语阅读方式是从右向左，也就是左边框变成了右边框，左内距变成了右内距。在逻辑属性还未出现之前，往往我们需要针对阿拉伯语单独做样式处理：