理解CSS的逻辑属性和值

特别声明，文本根据@Rachel Andrew的《 Understanding Logical Properties And Values 》一文所整理。

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布局以及书写模式的交互。

在过去，CSS属性运用于物理维度（尺寸）和方向，将元素的位置映射到 left 、 right 、 top 或 bottom 。使用 float 可以让一个元素向左或向右浮动，可以使用 position 的 top 、 right 、 bottom 和 left 定位元素的偏移量。使用比如 margin-top 或 padding-top 来设置 margin 、 padding 和 border 的值。这些特理属性和值在 top 、 right 、 bottom 和 left 和书写模式有很大的关系，书写模式可以直接改变其方向。比如：

• 当书写模式 direction 是 ltr （从左向右）时， margin-left 会让该元素距其左侧元素有多少间距（ padding 和 border 类似）
• 当书写模式 direction 是 rtl （从右向左）时， margin-left 不再是让该元素距其侧元素有多少间距了，而是变成了该元素距右侧元素之间有多少间距

如果你使用垂直书写模式，无论是在整个布局中还是在某些元素中，都没有什么意义。这篇文章中接下来将解释CSS如何改变这些，并且可以支持书写模式。在这个过程中，可以解释清楚一些关于Flexbox和Grid布局中一些令人感到困惑的一些事情。

当第一次开始使用CSS Grid并向大家解释其规范时，我注意到 grid-area 属性被用于 grid-row-start 、 grid-row-end 、 grid-column-start 和 grid-column-end 四个属性的简写属性。因此，下面三种书写方式，其达到的效果都是相同的：

.item {
    grid-row-start: 1;
    grid-column-start: 2;
    grid-row-end: 3;
    grid-column-end: 4;
}

.item {
    grid-row: 1 / 3;
    grid-column: 2 / 4;
}

.item {
    grid-area: 1 / 2 / 3 / 4;
}

grid-area 对应的顺序如下：

grid-row-start
grid-column-start
grid-row-end
grid-column-end

如果你想深入了解网格区域（ grid-area ）更详细的内容，可以阅读《网格区域》一文，有关于Grid 布局更多的内容可以点击这里进行了解。

这里有两个关键词 *-start 和 *-end ，而我们以前接触的CSS属性，比如 margin 、 padding 和 border 之类的都是以 *-top 、 *-right 、 *-bottom 和 *-left 。那么为什么会是如此呢？如果仔细观察，它们实际上是按照相反的顺序排列的： top 、 left 、 bottom 和 right 。这样一来，CSS工作组不是把事情变得更为困难了？

答案是，这些值 已经偏离了一个基本的假设，即Web上的内容映射到屏幕的物理尺寸，一个句子的第一个单词位于其所在框的左上角。如果你从未遇到过我们用简写的属性设置这些值，那么 grid-area 中的行顺序就变得完全有意义了。我们先设置了两个起始位置（行和列的起始位置），然后设置两个结束位置（行和列的结束位置）。

这意味着，如果书写模式改为垂直模式，那么块的位置仍然相对于文档的书写模式，而不是屏幕的物理属性。这样理解可能有点困惑。咱们来看看@Rachel Andrew在Codepen上给我们提供的一个 示例 ：

了解了书写模式的这个事实，也就解释清楚了为什么Flexbox和Grid是指开始和结束行，而不是将网格映射到 top 、 right 、 bottom 和 left 的物理维度上。

块和内联维度

上面已经提到