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

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

可能的值

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

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

适用于

所有定位元素。

语法

inset-block-start = auto | <length-percentage>	

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

CSS inset-block-start - 设置偏移量

以下示例演示如何使用 inset-block-start 属性，该属性将长度值传递给它，该值确定开始偏移值。

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

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

CSS inset-block-start - 百分比值

以下示例演示如何使用 inset-block-start 属性，该属性将百分比值传递给它，该值确定开始偏移值。写入模式设置为 horizontal-tb。

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

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

CSS inset-block-start - 有方向

以下示例演示了如何使用 inset-block-start 属性，其中 writing-mode 为 vertical-lr，direction 为 rtl。

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

	 	.inset-ex {
	 	 	 writing-mode: vertical-lr;
	 	 	 direction: rtl;
	 	 	 position: absolute;
	 	 	 inset-block-start: 150px;
	 	 	 background-color: white;
	 	}
</style>
</head>
<body>
	 	<div>
	 	 	 <span class="inset-ex">inset-block-start</span>
	 	</div>
</body>
</html>

CSS inset-block-start - 自动值

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

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

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

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