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

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

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

可能的值

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

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

适用于

所有定位元素。

语法

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

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

CSS inset-inline - 设置偏移量

下面的示例演示如何使用 inset-inline 属性，该属性将两个长度值传递给它，该属性确定开始和结束偏移值。

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

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

CSS inset-inline - 百分比值

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

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

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

CSS inset-inline - 混合值

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

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

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

CSS inset-inline - 自动值

下面的示例演示如何使用 inset-inline 属性，并将 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-inline: auto;
	 	 	 background-color: pink;
	 	}
</style>
</head>
<body>
	 	<div>
	 	 	 <span class="inset-ex">inset-inline</span>
	 	</div>
</body>
</html>

CSS inset-inline - 相关属性

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

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

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