逻辑属性
CSS 逻辑属性提供了一种基于文档的书写模式和方向而不是视口的物理尺寸来布局内容的方法。这使得设计更加灵活和易于维护,尤其是对那些支持多语言的网站。
物理属性(如 top
、right
、padding-bottom
和 border-bottom-left-radius
)定义基于物理方向的位置和特性、引用元素的特定边,逻辑属性(如 inset-block-start
、inset-inline-end
、padding-block-end
和 border-end-end-radius
)则使用相对于块向和行向轴的内容流的逻辑方向关键字。
块向
行向
行轴与块轴垂直,表示块内的行级内容(如文本)的流动方向(行向)。在英语等从左到右的书写模式中,行向是水平的从左到右。在阿拉伯语和希伯来语等从右到左的语言中,行向则是水平的从右到左。
inline-start 和 inline-end 分别表示沿行轴的内容的起始侧和结束侧,其中 inline-start
和 inline-end
的值和属性等同于水平书写模式中的 left
和 right
属性和值(具体对应关系视书写方向而定)。例如,在从左到右的语言中,inline-start
是 left
,在从右到左的语言中是 right
。