邏輯屬性
CSS 邏輯屬性 提供了一種根據文件的書寫模式和方向而非視口物理尺寸來佈局內容的方法。這使得設計更加靈活和易於維護,尤其適用於支援多種語言的網站。
與 物理屬性(如 top、right、padding-bottom 和 border-bottom-left-radius)基於物理方向定義位置和特徵,並引用元素的特定側邊不同,邏輯屬性(如 inset-block-start、inset-inline-end、padding-block-end 和 border-end-end-radius)使用邏輯方向關鍵字,這些關鍵字相對於塊軸和行內軸的內容流。
塊方向
塊軸 指的是在塊佈局中定義元素堆疊順序的軸。它本質上是網頁上內容塊(如段落 (<p>)、標題和 div (<div>))佈局的方向。這也被稱為塊方向。在從左到右的語言中,塊方向是內容流的垂直方向,從上到下。
塊起始 (block-start) 和 塊結束 (block-end) 方向分別表示沿塊軸的內容的起始邊和結束邊,或“從”和“到”的方向,其中 block-start 在水平書寫模式下等同於 top,block-end 等同於 bottom。
行內方向
行內軸 垂直於塊軸。行內軸表示文字等行內內容在塊中流動的方向。這也被稱為行內方向。在從左到右的書寫模式中,如英語,行內方向是水平的,從左到右。在從右到左的語言中,如阿拉伯語和希伯來語,行內方向是水平的,從右到左。
行內起始 (inline-start) 和 行內結束 (inline-end) 分別表示沿行內軸的內容的起始邊和結束邊,在水平書寫模式下,值和屬性 inline-start 和 inline-end 等同於 left 和 right 屬性和值。它們中的哪一個等同於 right 或 left 取決於書寫方向——例如,在從左到右的語言中,inline-start 是 left,而在從右到左的語言中是 right。