CSS 属性 inset-inline 确定元素在内联方向上的逻辑开始和结束偏移量。这取决于元素的 writing-mode、direction和text-orientation 它与物理偏移的 top和bottom,或left 和 right CSS 属性相关。
它是 inset-inline-end 和 inset-inline-start CSS 属性的简写属性。
属性值
CSS 属性 inset-inline 采用相同的一组值为 left CSS 属性,如下:
<length> -可以指定负值、空值或正值。
<percentage>: 容器宽度的百分比。
auto: 默认值。浏览器计算左侧位置。
inherit: 指定与从其父元素计算得出的值相同的值。
适用范围
所有定位元素。
语法
inset-inline = <'top'>{1,2}
/* <length> 长度值 */
inset-inline: 5px 10px;
inset-inline: 5px; /* value applied to start and end */
inset-inline: 3.4em 5em;
/* <percentage> 百分比 */
inset-inline: 15% 10%;
/* 关键字 */
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: auto
以下示例演示如何使用 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 | 设置一行中文本字符的方向。 |