03 CSS 逻辑属性
所谓逻辑属性,指的是诸如类似 margin-inline-start,padding-block-end 这类包含 inline/block 和 start/end 关键字的 CSS 属性。
其中 inline 和 block 表示方向, start 和 end 表示起止方位。 在中文和英文网页环境中,inline 元素默认是从左往右水平排列的;block 元素默认是从上往下垂直排列的。因此,margin-inline-start 就表示内联元素排列方向的起始位置,就是“左侧”,margin-inline-end 就表示内联元素排列方向的终止位置,就是“右侧”。
margin:
border-block:样式布局同时设置上下边框的场景
inset 及其相关属性是 left/top/right/bottom 属性的缩写。一种全局覆盖层的情景如下:
如果是水平方向的拉伸,则也不需要 left: 0; right: 0,可以使用 inset-inline 属性进行设置:
CSS 逻辑属性的兼容性已经可以放心使用。
最后更新于