css中margin-inline、margin-block、border-inline、border-block、inset-inline、inset-block逻辑属性解析

css中margin-inline、margin-block、border-inline、border-block、inset-inline、inset-block逻辑属性解析

其中的inline、block指的是方向，start和end指的是开始结束的方位

1. 例如margin-inline指的就是margin-inline-start和margin-inline-end的简写
2. 例如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属性

1. 水平方向上

   padding-left: 20px;
   padding-right: 20px;
   

   可以简写为

   padding-inline: 20px;
   

   margin-inlne也类似

2. 垂直方向上

   margin-top: 20px;
   margin-bottom: 20px;
   

   可以简写为

   margin-block: 20px;
   

   padding-block也类似

3. border垂直方向上的简写

   border-top: 1px solid #ddd;
   border-bottom: 1px solid #ddd;
   

   可以简写为

   border-block: 1px solid #ddd;
   

4. border水平方向上的简写

   border-left: 1px solid #ddd;
   border-right: 1px solid #ddd;
   

   可以简写为

   border-inline: 1px solid #ddd;
   

5. 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