CSS - inset-block 属性_CSS 菜鸟教程

CSS 属性 inset-block 确定元素的逻辑块开始和结束偏移量。这取决于元素的书写模式、方向和文本方向。它与顶部和底部，或左侧和右侧 CSS 属性相关。

它是 inset-block-end 和 inset-block-start CSS 属性的简写属性。

可能的值

CSS 属性 inset-block 采用与 left CSS 属性相同的值集，如下所示：

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

适用于

所有定位元素。

语法


inset-block = <'top'>{1,2} 	

/* <length> values */
inset-block: 5px 10px;
inset-block: 5px; /* value applied to start and end */
inset-block: 3.4em 5em;
	 	
/* <percentage>s of the width or height of the containing block */
inset-block: 15% 10%;
	 	
/* Keyword value */
inset-block: auto;

CSS inset-block - 设置偏移量

以下示例演示如何使用 inset-block 属性，该属性传递了两个长度值，用于确定开始和结束偏移值。


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

	 	.inset-ex {
	 	 	 text-orientation: sideways-right;
	 	 	 direction: rtl;
	 	 	 position: absolute;
	 	 	 inset-block: 25px 45px;
	 	 	 background-color: pink;
	 	}
</style>
</head>
<body>
	 	<div>
	 	 	 <span class="inset-ex">inset-block</span>
	 	</div>
</body>
</html>

CSS inset-block - 百分比值

以下示例演示如何使用 inset-block 属性，该属性传递了两个百分比值，用于确定开始和结束偏移值。写入模式设置为 horizontal-tb。


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

	 	.inset-ex {
	 	 	 writing-mode: horizontal-tb;
	 	 	 position: absolute;
	 	 	 inset: 20% 10%;
	 	 	 background-color: pink;
	 	}
</style>
</head>
<body>
	 	<div>
	 	 	 <span class="inset-ex">inset-block</span>
	 	</div>
</body>
</html>

CSS inset-block - 混合值

以下示例演示如何使用 inset-block 属性，该属性将混合值（长度和百分比）传递给它，该属性确定开始和结束偏移值。书写模式也设置为 vertical-lr。


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

	 	.inset-ex {
	 	 	 writing-mode: vertical-lr;
	 	 	 position: absolute;
	 	 	 inset-block: 25px 45%;
	 	 	 background-color: pink;
	 	}
</style>
</head>
<body>
	 	<div>
	 	 	 <span class="inset-ex">inset-block</span>
	 	</div>
</body>
</html>

CSS inset-block - 自动值

以下示例演示如何使用 inset-block 属性，并将 auto 作为值传递给它，该属性确定开始和结束偏移值。写入模式也设置为 horizontal-tb。


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

	 	.inset-ex {
	 	 	 writing-mode: horizontal-tb;
	 	 	 position: absolute;
	 	 	 inset-block: auto;
	 	 	 background-color: pink;
	 	}
</style>
</head>
<body>
	 	<div>
	 	 	 <span class="inset-ex">inset-block</span>
	 	</div>
</body>
</html>

CSS inset-block - 相关属性

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

属性	描述
bottom	设置定位元素在底部的垂直位置。
left	设置左侧定位元素的水平位置。
right	设置右侧定位元素的水平位置。.
top	设置定位元素在顶部的垂直位置。
inset	设置元素的物理偏移量。
inset-block-end	定义元素的逻辑块结束偏移量。
inset-block-start	定义元素的逻辑块开始偏移量。
writing-mode	设置文本行是水平显示还是垂直显示。
direction	设置文本的方向，从左到右或从右到左。
text-orientation	设置行中文本字符的方向。

<< CSS - inline-size 属性 CSS - inset-block-end 属性 >>