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

Question

不确定，但我似乎记得有一种方法可以表示 css 中定位的顶部、右侧、向下、左侧的值，如下所示:positioning: top right bottom left ，很像时钟的顺序(顺时针)。例如:Positioning: 10px 20px 10px 30px;作为以这种方式设置位置的替代方法？

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

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

Answer 1

是的，它叫做 inset

This shorthand property sets the top, right, bottom, and left properties. Values are assigned to its sub-properties as for margin. ^ref

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

<div class="box">

</div>

如果您阅读我链接的规范，您还会发现更多与 inset 相关的子属性称为流相对偏移

The top, left, bottom, right physical properties, their inset-block-start, inset-block-end, inset-inline-start, inset-inline-end flow-relative correspondants, and the inset-block, inset-inline, and inset shorthands, are collectively known as the inset properties.

CSS 引入了 flow-relative 属性/值的概念，以便于处理不同的书写模式和方向:
相关:What is the difference between margin-block-start and margin-top?

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

The shorthand properties for margin, padding, and border set values for physical properties by default. But authors can specify the logical keyword at the beginning of the property value to indicate that the values map to the flow-relative properties instead of the physical ones.

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