①所谓逻辑属性，指的是诸如类似margin-inline-start，padding-block-end这类包含inline/block和start/end关键字的CSS属性。其中 inline 和 block 表示方向， start 和 end 表示起止方位。
在中文和英文网页环境中，inline元素（文字、图片、按钮等）的默认是从左往右水平排列的；block元素（如div、p元素等）默认是从上往下垂直排列的，
因此，margin-inline-start就表示内联元素排列方向的起始位置，就是“左侧”，margin-inline-end就表示内联元素排列方向的终止位置，就是“右侧”；
②CSS逻辑属性相比过去的带有方位的CSS属性而言，CSS属性是大量增加的，
比方说过去，margin属性只有四个方位，margin-top、margin-right、margin-bottom、margin-left,而作为逻辑属性的margin，则多了两个方位，那就是水平方位和垂直方位,margin-inline、margin-block；
在过去，我们希望某个元素水平margin间距是16px，为了不影响上下可能的margin值，所以不能使用 margin: 0 16px这种缩写，只能分开设置：margin-right: 16px;margin-left: 16px;
但是现在，有了即可以缩写，又不影响垂直margin的CSS属性，那就是margin-inline，直接这么设置就可以了：margin-inline: 16px；
设置上下边框：border-block: 1px solid #ddd;
简化CSS属性最犀利的属性定是 inset 属性了，inset 及其相关属性是 left/top/right/bottom 属性的缩写；
在过去，一个全屏的覆盖层，我们可能是这么设置的：position: fixed;left: 0;top: 0;right: 0;bottom: 0;
现在可以直接使用 inset:0 这个CSS声明四合一：position: fixed;inset: 0;
如果是水平方向的拉伸，则也不需要 left: 0; right: 0，可以使用 inset-inline属性进行设置
（参考：www.zhangxinxu.com/wordpress/2…
