CSS 邏輯屬性和值
CSS 邏輯屬性與值模組定義了邏輯屬性與值,這些屬性與值可以透過邏輯而非物理方向和尺寸對映來控制佈局。邏輯屬性定義了其對應物理屬性的方向相關等價物。
行的起始位置並非總是行的左側。不同的書寫系統以不同的方向運作。例如:
- 英語和葡萄牙語從左到右書寫,新行新增在上一行下方。
- 希伯來語和阿拉伯語是從右到左的語言,新行同樣新增在上一行下方。
- 在某些書寫模式中,文字行是垂直的,從上到下書寫,每條新垂直行新增在上一行的左側。中文、越南語、韓語和日語傳統上是垂直書寫,從上到下,每條新垂直行新增在上一條的左側。
- 傳統蒙古語也是一種從上到下的語言,但新行新增在上一行的右側。
此模組中定義的邏輯屬性使得能夠定義相對於內容書寫方向的屬性,而不是物理方向。這意味著翻譯成不同書寫模式語言的內容將按預期呈現。
邏輯屬性和值使用抽象術語塊和內聯來描述它們流動的方向。這些術語的物理含義取決於書寫模式。
塊維度垂直於行內文字流,即水平書寫模式中的垂直維度,以及垂直書寫模式中的水平維度。對於標準英語文字,它是垂直維度。
內聯維度平行於行內文字流,即水平書寫模式中的水平維度,以及垂直書寫模式中的垂直維度。對於標準英語文字,它是水平維度。
CSS 最初僅設計有物理座標。邏輯屬性與值模組為許多值和屬性定義了流相關的等價物。曾經只接受物理值(top、bottom、left、right)的屬性現在也接受流相關的邏輯值(block-start、block-end、inline-start、inline-end)。
參考
屬性
block-sizeborder-blockborder-block-colorborder-block-endborder-block-end-colorborder-block-end-styleborder-block-end-widthborder-block-startborder-block-start-colorborder-block-start-styleborder-block-start-widthborder-block-styleborder-block-widthborder-end-end-radiusborder-end-start-radiusborder-inlineborder-inline-colorborder-inline-endborder-inline-end-colorborder-inline-end-styleborder-inline-end-widthborder-inline-startborder-inline-start-colorborder-inline-start-styleborder-inline-start-widthborder-inline-styleborder-inline-widthborder-start-end-radiusborder-start-start-radiusinline-sizeinsetinset-blockinset-block-endinset-block-startinset-inlineinset-inline-endinset-inline-startmargin-blockmargin-block-endmargin-block-startmargin-inlinemargin-inline-endmargin-inline-startmax-block-sizemax-inline-sizemin-block-sizemin-inline-sizepadding-blockpadding-block-endpadding-block-startpadding-inlinepadding-inline-endpadding-inline-start
資料型別和值
流相對值:
block-startblock-endinline-startinline-endstartend
術語表
指南
- 邏輯屬性和值的基本概念
-
流相關屬性和值概述。
- 用於尺寸的邏輯屬性
-
用於頁面上元素尺寸的物理屬性和邏輯屬性之間的流相關對映。
- 用於外邊距、邊框和內邊距的邏輯屬性
-
各種 margin、border 和 padding 屬性及其簡寫形式的流相關對映。
- 用於浮動和定位的邏輯屬性
-
float和clear、inset 屬性以及resize的物理值和邏輯值之間的詳細對映。
相關概念
規範
| 規範 |
|---|
| CSS 邏輯屬性和值第 1 級 |