當前內容所在位置（可進入專欄查看其他譯好的章節內容）

• 第一章 層疊、優先級與繼承（已完結）
  • 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 行內元素與塊級元素在各種書寫模式下的文檔流方向

要適應這些邏輯屬性，關鍵是得熟悉這些新的叫法。改變原有的頁面布局大可不必，換掉那些習以為常的術語即可。至于適應多種書寫模式及語言的問題，還是留到真要翻譯頁面內容的時候再說吧；在使用邏輯屬性的前提下，如果布局方案能在從左到右書寫的、熟悉的語言中奏效，那么一旦書寫模式改變，該布局方案也會隨之調整。

工作中只用到一種語言，是否還需要邏輯屬性？

這取決于您的工作和生活環境。創建可以支持其他書寫模式的網站，這樣的場景可能并不多見。即便如此，理解邏輯屬性的工作原理仍然非常重要，原因有三——

1. 邏輯屬性是 flexbox 布局和 grid 布局中眾多核心概念不可或缺的前期儲備知識（本書將在后續兩章中深入探討這些布局概念）；
2. 一些邏輯屬性是沒有對應的傳統屬性的，但有時用起來往往更加方便；
3. 隨著邏輯屬性在行業中的應用日益廣泛，正確理解遇到的新樣式寫法也尤為重要。
   
   

實際工作中，如果正在開發的網站無需切換書寫模式，那么究竟是用邏輯屬性還是傳統屬性，亦或是將二者有機結合，都完全可以由您自行決定。即使是在多語言場景下，有時可能也需要用到一些傳統屬性，例如要讓新增的樣式效果在任何書寫方向上都保持一致的時候。

如果您一直在用瀏覽器的 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，而無需指定上下外邊距 */
}

這些更改不會給頁面帶來任何視覺變化，僅僅是方便了頁面樣式的編寫。我發現這些樣式簡寫非常有用，因為我經常要為外邊距或其他樣式屬性單獨指定上下或左右兩邊的值。