是否有一个 css 函数允许我在一行中设置位置的顶部、右侧、底部和左侧的值？答案

【问题标题】：Is there a css function that allows me to set the values of top, right, bottom, and left for position all in one line?是否有一个 css 函数允许我在一行中设置位置的顶部、右侧、底部和左侧的值？
【发布时间】：2021-05-03 10:31:42
【问题描述】：

不确定，但我似乎记得有一种方法可以表示 css 中定位的上、右、下、左的值，像这种格式：positioning: top right bottom left，很像时钟的顺序（顺时针)。例如：Positioning: 10px 20px 10px 30px;

作为以这种方式设置位置的替代方法？

<style>
body {
position: relative;
top: 10px;
right: 20px;
bottom: 10px;
left: 30px;
}
</style>

谁能帮我弄清楚我在回忆什么？

【问题讨论】：

您是否在考虑其他设置，例如从顶部顺时针方向的边框宽度、边距等。

标签： html css

【解决方案1】：

是的，它叫inset

此速记属性设置顶部、右侧、底部和左侧属性。将值分配给其子属性，如保证金。 ^ref

.box {
  position:fixed;
  inset:20px 50px 50% 10px;
  /*
  top:20px;
  right:50px;
  bottom:50%;
  left:10px;
  */
  background:red;
}

<div class="box">

</div>

如果您阅读我链接的规范，您还会发现更多与 inset 相关的子属性，称为 Flow-relative Offsets

top、left、bottom、right物理性质，它们的inset-block-start、inset-block-end、inset-inline-start、inset-inline-end流-相对对应物，以及inset-block、inset-inline和inset简写，统称为插入属性。

CSS 引入了 flow-relative 属性/值的概念，以便于处理不同的书写模式和方向：

我们还可以使用 logical 关键字将现有属性转换为相对属性

默认物理属性的边距、内边距和边框设置值的简写属性。但是作者可以在属性值的开头指定logical 关键字，以指示这些值映射到流相关属性而不是物理属性。

这个还远远没有得到任何支持：https://github.com/w3c/csswg-drafts/issues/1282

【讨论】：