css中margin-inline、margin-block、border-inline、border-block、inset-inline、inset-block逻辑属性解析
其中的inline、block指的是方向，start和end指的是开始结束的方位
- 例如
margin-inline指的就是margin-inline-start和margin-inline-end的简写 - 例如
margin-block指的就是margin-block-start和margin-block-end的简写
如果内联元素排列方向是水平方向且从左往右排列，margin-inline-start，start对应的就是左侧，margin-inline-end，end对应的就是右侧
- 如果设置
direction:rtl，那么水平文档流就是从右往左排列，start对应的就是右侧，end对应的就是左侧 - 如果设置
writing-mode:vertical-rl属性把文档流改为垂直且从右往左排列，此时内联元素就是从上往下排列的，因此，inline就是垂直方向，block就是水平方向
大部分情况下，文档流方向是不会改变的，下面就按照默认的文档流方向举例，来简写css属性
- 水平方向上
可以简写为padding-left: 20px; padding-right: 20px;padding-inline: 20px;margin-inlne也类似 - 垂直方向上
可以简写为margin-top: 20px; margin-bottom: 20px;margin-block: 20px;padding-block也类似 -
border垂直方向上的简写
可以简写为border-top: 1px solid #ddd; border-bottom: 1px solid #ddd;border-block: 1px solid #ddd; -
border水平方向上的简写
可以简写为border-left: 1px solid #ddd; border-right: 1px solid #ddd;border-inline: 1px solid #ddd; -
inset简写
可以简写为position: fixed; top: 0; left: 0; right: 0; bottom: 0;
也可以简写为position: fixed; inset: 0;position: fixed; inset-inline: 0; inset-block: 0;-
inset-inline代表水平方向上的left、right -
inset-block代表水平方向上的top、bottom
-
