梗概
- 逻辑属性的上下左右不是根据屏幕方位，而是根据文字的书写方向
- 如文字从左到右，则
margin-block是上下 - 如文字从上到下，则
margin-block是左右
- 如文字从左到右，则
block代表块级元素的流方向，即上下inline代表行内元素的流方向，即左右
适用范围
引入
整个 css 世界就是围绕“流”来构建的，在css2.1时代，css属性的定位都是基于方向的，而不是“流”。这样的设计其实是有问题的基于方向进行定位虽然符合现实世界认知，但和css世界基于“流”的底层设计理念不符，这样就会产生不合理的问题
css 逻辑属性有限的使用场景
css 逻辑属性需要配合 writing-mode 属性、direction属性或者 text-orientation属性使用才有意义，这些属性都是平常不常用的css属性，这就导致css逻辑属性的使用场景非常有限，也存在着非常适合使用css逻辑属性的场景，对称布局，如微信对话的效果就是经典的对称布局
inline/block 与 start/end 元素
以margin方位属性和margin逻辑属性相互的映射关系
| 方位属性 | 逻辑属性 |
|---|---|
| margin-left | margin-inline-start |
| margin-top | margin-block-start |
| margin-right | margin-inline-end |
| margin-bottom | margin-block-end |
inline/block表示方向，start/end表示起止方位 如果使用 direction 属性改变文档方向，这 inline/block，start/end 表示相反的反向和方位
width/height属性与 inline-size/block-size 逻辑属性
- width属性对应的css逻辑属性是inline-size
- height 属性对应的 css 逻辑属性是 block-size
- min-width 对应 min-inline-size
- min-block-size 对应 min-block-size
- max-width 对应 max-inline-size
- max-height 对应 max-block-size
text-align 属性支持的逻辑属性值
对于 text-align 属性而言，演变的不是属性而是属性值
- text-align:start;
- text-align:end;
最有用的 css 逻辑属性 inset
child::inset属性