是否有一个css函数可以让我在一行中设置顶部、右侧、底部和左侧的位置值?

不确定,但我似乎记得有一种方法可以表示 css 中定位的 top、right、down、left 的值,就像这种格式:positioning: top right bottom left,很像时钟的顺序(顺时针)。前任:Positioning: 10px 20px 10px 30px;

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

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

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

回答

是的,它被称为 inset

此速记属性设置顶部、右侧、底部和左侧属性。值被分配给它的子属性作为边距。参考

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

</div>

当然支持率仍然很低:https : //caniuse.com/mdn-css_properties_inset(目前仅支持 Chrome 和 Firefox)


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

topleftbottomright 的物理性质,它们的inset-block-startinset-block-endinset-inline-startinset-inline-end 流动相对correspondants,并且inset-blockinset-inlineinset速记,统称为插图属性。

CSS 引入了flow-relative的概念属性/值以便更容易处理不同的书写方式和方向:

相关:margin-block-start 和 margin-top 有什么区别?


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

默认情况下,margin、padding 和 border 的速记属性设置物理属性的值。但是作者可以logical在属性值的开头指定关键字,以指示这些值映射到与流相关的属性而不是物理属性

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


以上是是否有一个css函数可以让我在一行中设置顶部、右侧、底部和左侧的位置值?的全部内容。
THE END
分享
二维码
< <上一篇
下一篇>>