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：

/* 四方位 */
margin-top
margin-right
margin-bottom
margin-left

/* 水平与垂直 */
margin-inline
margin-block

border-block：样式布局同时设置上下边框的场景

/* 过去 1 */
border: solid #ddd;
border-width: 1px 0;

/* 过去 2 */
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;

/* 现在 */
border-block: 1px solid #ddd;

inset 及其相关属性是 left/top/right/bottom 属性的缩写。一种全局覆盖层的情景如下：

/* 过去 */
.overlay {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}

/* 现在 */
.overlay {
  position: fixed;
  inset: 0;
}

如果是水平方向的拉伸，则也不需要 left: 0; right: 0，可以使用 inset-inline 属性进行设置：

.header-bar {
  inset-inline: 0;
}

CSS 逻辑属性的兼容性已经可以放心使用。