css inset属性

/* 使用 inset 属性设置元素的位置 */

/* 示例 1: 设置固定定位的 div 元素距离页面边界的距离 */
div {
  position: fixed;
  inset: 10px; /* 等同于 top: 10px; right: 10px; bottom: 10px; left: 10px; */
  background-color: lightblue;
}

/* 示例 2: 分别设置 top, right, bottom, left 的值 */
div {
  position: absolute;
  inset: 20px 40px 60px 80px; /* 等同于 top: 20px; right: 40px; bottom: 60px; left: 80px; */
  background-color: lightcoral;
}

/* 示例 3: 只设置 top 和 bottom 的值，左右居中 */
div {
  position: absolute;
  inset: 20px auto; /* 等同于 top: 20px; bottom: 20px; left: auto; right: auto; */
  margin: 0 auto; /* 让元素左右居中 */
  width: 200px;
  background-color: lightgreen;
}

解释说明：

• inset 是 CSS 中的一个简写属性，用于同时设置 top、right、bottom 和 left 四个方向的距离。
• 它可以接受一个或多个值，具体如下：
  • 如果提供一个值，则四个方向的距离都相同。
  • 如果提供两个值，第一个值应用于 top 和 bottom，第二个值应用于 left 和 right。
  • 如果提供三个值，第一个值应用于 top，第二个值应用于 left 和 right，第三个值应用于 bottom。
  • 如果提供四个值，依次应用于 top、right、bottom 和 left。