css逻辑属性
CSS 逻辑属性与值是 CSS 的一个模块，其引入的属性与值能做从逻辑角度控制布局，而不是从物理、方向或维度来控制。
物理属性（left、right、top、bottom）；逻辑属性（start、end）
CSS 逻辑属性是一组属性，允许开发人员创建对不同屏幕尺寸和语言响应更快的布局。这些属性基于逻辑值的概念，逻辑值是与用户环境相关的值，例如语言、书写方向和屏幕大小。
逻辑属性用于创建更灵活和适应不同环境的布局。例如，开发人员可以使用 margin-inline-start 属性来设置元素左侧的边距，而不考虑书写方向。这允许布局响应不同的语言和书写方向。
逻辑属性还可用于创建针对不同屏幕尺寸进行优化的响应式布局。例如，padding-block-start 属性可用于设置元素顶部的填充，而不管屏幕大小。这允许布局响应不同的屏幕尺寸。
总的来说，CSS 逻辑属性是创建针对不同环境优化的响应式布局的强大工具。它们允许开发人员创建更灵活并适应不同语言、书写方向和屏幕尺寸的布局
block
block：垂直于一行内文本流的维度
inline
block：与一行内的文本流平行的维度
逻辑属性，之所以叫逻辑属性，因为其最终的渲染方向表现出逻辑判断。
举例：
margin-inline-start 水平方向的start,如果排列方向是ltr，和margin-left含义相同，如果是rtl,和margin-right相同
border-inline 设置左右边框样式
padding-block 设置上下间距
float: inline-start 相当于 float: left
优势：
-
1.兼容不同阅读模式
在不同direction下，更好的适配；在ui组件中使用，antD5已经使用逻辑属性 -
2.简化代码
例如：
一个全屏的覆盖层，过去可能是这么设置的：
.overlay {position: fixed;left: 0;top: 0;right: 0;bottom: 0;
}
简写
inset 及其相关属性是 left/top/right/bottom 属性的缩写。
.overlay {position: fixed;inset: 0;
}
设置上下边框
.border1 {border-top: 1px solid #ddd;border-bottom: 1px solid #ddd;
}简写
.module {border-block: 1px solid #ddd;
}
示例
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><style>main {display: flex;}.case1 {width: 400px;background: #ccc;}p {margin: 0;padding: 0;}.item {display: flex;}.ava {color: red;width: 50px;height: 50px;border-block: 2px solid currentColor;border-inline: 2px solid rgb(92, 250, 105);background
之docker start/stop/kill/restart/pause/unpause)
