CSS属性insert

2022-12-292116次阅读css

CSS属性insert是一个简写,对应于top、right、bottom和left属性。它具有与margin速记相同的多值语法。

/* <length> values */
inset: 10px; /* value applied to all edges */
inset: 4px 8px; /* top/bottom left/right */
inset: 5px 15px 10px; /* top left/right bottom */
inset: 2.4em 3em 3em 3em; /* top right bottom left */

/* <percentage>s of the width (left/right) or height (top/bottom) of the containing block */
inset: 10% 5% 5% 5%;

/* Keyword value */
inset: auto;

/* Global values */
inset: inherit;
inset: initial;
inset: revert;
inset: revert-layer;
inset: unset;

过去一个全屏的覆盖层,我们可能是这么设置的:

.overlay {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
}

现在只需要

.overlay {
    position: fixed;
    insert: 0
}

 

上一篇: js数组实例方法copyWithin  下一篇: CSS现在有一个父选择器:has  

CSS属性insert相关文章