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

CSS inset-inline-start 属性确定元素的逻辑内联开始插入。它取决于元素的书写模式、方向和文本方向，以实现物理偏移。它与顶部和底部，或左侧或右侧 CSS 属性相关。

可能的值

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

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

适用于

所有定位元素。

语法

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

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

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

下面的示例演示如何使用 inset-inline-start 属性，该属性具有传递给它的长度值，该值确定内联开始偏移值。

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

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

CSS inset-inline-start - 百分比值

下面的示例演示如何使用 inset-inline-start 属性，该属性将传递一个百分比值，该值确定内联开始偏移值。写入模式设置为 horizontal-tb。

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

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

CSS inset-inline-start - 带方向

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

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

	 	.inset-ex {
	 	 	 writing-mode: vertical-lr;
	 	 	 direction: rtl;
	 	 	 position: absolute;
	 	 	 inset-inline-start: 1.5em;
	 	 	 background-color: cornsilk;
	 	}
</style>
</head>
<body>
	 	<div>
	 	 	 <span class="inset-ex">inset-inline-start</span>
	 	</div>
</body>
</html>

CSS inset-inline-start - 自动值

下面的示例演示如何使用 inset-inline-start 属性，并将 auto 作为值传递给它，该属性确定内联启动偏移值。写入模式也设置为 horizontal-tb。

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

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

<< CSS - inset-inline-end 属性 CSS Flexbox - justify-content 属性 >>