逻辑属性
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。