理解CSS的邏輯屬性和值
特別宣告，文字根據@Rachel Andrew的《ofollow,noindex" target="_blank">Understanding Logical Properties And Values 》一文所整理。
2017年5月18日，W3C的CSS/Members/" rel="nofollow,noindex" target="_blank">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
的物理維度上。
塊和內聯維度
上面已經提到