CSS - inset 属性

CSS inset 属性是其他 CSS 属性 top、right、bottom 和/或 left 的简写。

它遵循与 margin CSS 属性相同的多值语法。

inset 属性指定物理偏移量，与元素的书写模式、方向和文本方向无关。

可能的值

CSS 属性插图采用与左侧 CSS 属性相同的值集，如下所示：

<length> - 可以指定负值、空值或正值。
<percentage> - 容器宽度的百分比。
auto − 默认值。浏览器计算左侧位置。
inherit − 指定从其父元素计算出的相同值。

适用于

所有定位元素。

探索我们最新的在线课程，按照自己的节奏学习新技能。注册并成为认证专家，以提升您的职业生涯。

语法


inset = <'top'>{1,4} 	

/* <length> values */
inset: 5px; /* value applied to all edges */
inset: 5px 10px; /* top/bottom left/right */
inset: 3px 5px 8px; /* top left/right bottom */
inset: 3.4em 5em 4em 4em; /* top right bottom left */
	 	
/* <percentage>s of the width (left/right) or height (top/bottom) of the containing block */
inset: 15% 10% 10% 10%;
	 	
/* Keyword value */
inset: auto;

CSS inset - 四个长度值

以下示例演示如何使用 inset 属性，该属性传递了四个长度值，用于确定顶部、右侧、底部和左侧偏移值。


<html>
<head>
<style>
	 	div {
	 	 	 background-color: green;
	 	 	 width: 180px;
	 	 	 height: 120px;
	 	 	 position: relative;
	 	}

	 	.inset-ex {
	 	 	 writing-mode: sideways-rl;
	 	 	 position: absolute;
	 	 	 inset: 25px 45px 35px 15px;
	 	 	 background-color: greenyellow;
	 	}
</style>
</head>
<body>
	 	<div>
	 	 	 <span class="inset-ex">Inset - 4 values</span>
	 	</div>
</body>
</html>

CSS inset - 三个长度值

以下示例演示如何使用 inset 属性，该属性传递了三个长度值，用于确定顶部、右侧、底部和左侧偏移值。


<html>
<head>
<style>
	 	div {
	 	 	 background-color: green;
	 	 	 width: 180px;
	 	 	 height: 120px;
	 	 	 position: relative;
	 	}

	 	.inset-ex {
	 	 	 writing-mode: sideways-rl;
	 	 	 position: absolute;
	 	 	 inset: 25px 35px 15px;
	 	 	 background-color: greenyellow;
	 	}
</style>
</head>
<body>
	 	<div>
	 	 	 <span class="inset-ex">Inset - 3 values</span>
	 	</div>
</body>
</html>

CSS inset - 两个长度值

以下示例演示如何使用 inset 属性，该属性传递了两个长度值，用于确定顶部、右侧、底部和左侧偏移值。


<html>
<head>
<style>
	 	div {
	 	 	 background-color: green;
	 	 	 width: 180px;
	 	 	 height: 120px;
	 	 	 position: relative;
	 	}

	 	.inset-ex {
	 	 	 writing-mode: sideways-rl;
	 	 	 position: absolute;
	 	 	 inset: 25px 35px;
	 	 	 background-color: greenyellow;
	 	}
</style>
</head>
<body>
	 	<div>
	 	 	 <span class="inset-ex">Inset - 2 values</span>
	 	</div>
</body>
</html>

CSS inset - 一个长度值

下面的示例演示如何使用 inset 属性，该属性仅传递给一个长度值，该值确定顶部、右侧、底部和左侧偏移值。


<html>
<head>
<style>
	 	div {
	 	 	 background-color: green;
	 	 	 width: 180px;
	 	 	 height: 120px;
	 	 	 position: relative;
	 	}

	 	.inset-ex {
	 	 	 writing-mode: sideways-rl;
	 	 	 position: absolute;
	 	 	 inset: 35px;
	 	 	 background-color: greenyellow;
	 	}
</style>
</head>
<body>
	 	<div>
	 	 	 <span class="inset-ex">Inset - 1 value</span>
	 	</div>
</body>
</html>

CSS inset - 百分比值

以下示例演示如何使用 inset 属性，该属性传递了两个百分比值，用于确定顶部、右侧、底部和左侧偏移值。


<html>
<head>
<style>
	 	div {
	 	 	 background-color: green;
	 	 	 width: 180px;
	 	 	 height: 120px;
	 	 	 position: relative;
	 	}

	 	.inset-ex {
	 	 	 writing-mode: sideways-rl;
	 	 	 position: absolute;
	 	 	 inset: 25% 35%;
	 	 	 background-color: greenyellow;
	 	}
</style>
</head>
<body>
	 	<div>
	 	 	 <span class="inset-ex">Inset - 2 % values</span>
	 	</div>
</body>
</html>

CSS 插图 - 混合值

以下示例演示了如何使用具有混合值的 inset 属性，即一个长度和另一个作为传递给它的百分比值，用于确定顶部、右侧、底部和左侧偏移值。


<html>
<head>
<style>
	 	div {
	 	 	 background-color: green;
	 	 	 width: 180px;
	 	 	 height: 120px;
	 	 	 position: relative;
	 	}

	 	.inset-ex {
	 	 	 writing-mode: sideways-rl;
	 	 	 position: absolute;
	 	 	 inset: 0.25em 10%;
	 	 	 background-color: greenyellow;
	 	}
</style>
</head>
<body>
	 	<div>
	 	 	 <span class="inset-ex">Inset - mixed values</span>
	 	</div>
</body>
</html>

CSS inset - 自动值

以下示例演示如何使用 inset 属性，并将 auto 值传递给它，该属性确定顶部、右侧、底部和左侧偏移值。


<html>
<head>
<style>
	 	div {
	 	 	 background-color: green;
	 	 	 width: 180px;
	 	 	 height: 120px;
	 	 	 position: relative;
	 	}

	 	.inset-ex {
	 	 	 writing-mode: vertical-lr;
	 	 	 position: absolute;
	 	 	 inset: auto;
	 	 	 background-color: greenyellow;
	 	}
</style>
</head>
<body>
	 	<div>
	 	 	 <span class="inset-ex">Inset - auto</span>
	 	</div>
</body>
</html>

CSS inset - 相关属性

下表列出了 CSS inset 的所有相关属性：

属性	描述
bottom	设置定位元素在底部的垂直位置。
left	设置左侧定位元素的水平位置。
right	设置右侧定位元素的水平位置。
top	设置定位元素在顶部的垂直位置。
margin	用于设置元素边距的简写。
inset-block	指定元素的逻辑块开始和结束偏移量。
inset-inline	指定元素在内联方向上的逻辑块开始和结束偏移。

打印本页