CSS 邏輯屬性和值

CSS 邏輯屬性與值模組定義了邏輯屬性與值,這些屬性與值可以透過邏輯而非物理方向和尺寸對映來控制佈局。邏輯屬性定義了其對應物理屬性的方向相關等價物。

行的起始位置並非總是行的左側。不同的書寫系統以不同的方向運作。例如:

  • 英語和葡萄牙語從左到右書寫,新行新增在上一行下方。
  • 希伯來語和阿拉伯語是從右到左的語言,新行同樣新增在上一行下方。
  • 在某些書寫模式中,文字行是垂直的,從上到下書寫,每條新垂直行新增在上一行的左側。中文、越南語、韓語和日語傳統上是垂直書寫,從上到下,每條新垂直行新增在上一條的左側。
  • 傳統蒙古語也是一種從上到下的語言,但新行新增在上一行的右側。

此模組中定義的邏輯屬性使得能夠定義相對於內容書寫方向的屬性,而不是物理方向。這意味著翻譯成不同書寫模式語言的內容將按預期呈現。

邏輯屬性和值使用抽象術語內聯來描述它們流動的方向。這些術語的物理含義取決於書寫模式

塊維度垂直於行內文字流,即水平書寫模式中的垂直維度,以及垂直書寫模式中的水平維度。對於標準英語文字,它是垂直維度。

內聯維度平行於行內文字流,即水平書寫模式中的水平維度,以及垂直書寫模式中的垂直維度。對於標準英語文字,它是水平維度。

CSS 最初僅設計有物理座標。邏輯屬性與值模組為許多屬性定義了流相關的等價物。曾經只接受物理值(topbottomleftright)的屬性現在也接受流相關的邏輯值(block-startblock-endinline-startinline-end)。

參考

屬性

資料型別和值

流相對值:

  • block-start
  • block-end
  • inline-start
  • inline-end
  • start
  • end

術語表

指南

邏輯屬性和值的基本概念

流相關屬性和值概述。

用於尺寸的邏輯屬性

用於頁面上元素尺寸的物理屬性和邏輯屬性之間的流相關對映。

用於外邊距、邊框和內邊距的邏輯屬性

各種 margin、border 和 padding 屬性及其簡寫形式的流相關對映。

用於浮動和定位的邏輯屬性

floatclearinset 屬性以及 resize 的物理值和邏輯值之間的詳細對映。

CSS 盒子模型

CSS 盒子大小

CSS 背景和邊框

CSS 定位佈局

CSS 書寫模式

CSS 包含

CSS overflow

CSS overscroll behavior

規範

規範
CSS 邏輯屬性和值第 1 級

另見