是否有一个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相关的子属性
的
top,left,bottom,right的物理性质,它们的inset-block-start,inset-block-end,inset-inline-start,inset-inline-end流动相对correspondants,并且inset-block,inset-inline和inset速记,统称为插图属性。
CSS 引入了flow-relative的概念属性/值以便更容易处理不同的书写方式和方向:
相关:margin-block-start 和 margin-top 有什么区别?
我们还可以使用logical关键字将现有属性转换为相对属性
默认情况下,margin、padding 和 border 的速记属性设置物理属性的值。但是作者可以
logical在属性值的开头指定关键字,以指示这些值映射到与流相关的属性而不是物理属性。
这个还远没有得到任何支持:https : //github.com/w3c/csswg-drafts/issues/1282