inset-inline
Baseline 廣泛可用 *
inset-inline CSS 屬性定義了元素在行內方向上的邏輯起始偏移和結束偏移，它根據元素的書寫模式、方向性和文字方向對映到物理偏移。它對應於 top 和 bottom 屬性，或者 right 和 left 屬性，具體取決於為 writing-mode、direction 和 text-orientation 定義的值。
此 插入屬性 對非定位元素沒有影響。
試一試
inset-inline: 5% 10%;
writing-mode: horizontal-tb;
inset-inline: 10px 40px;
writing-mode: vertical-rl;
inset-inline: 5% 10%;
writing-mode: horizontal-tb;
direction: rtl;
<section id="default-example">
<div class="example-container">
<div id="example-element">I am absolutely positioned.</div>
<p>
As much mud in the streets as if the waters had but newly retired from the
face of the earth, and it would not be wonderful to meet a Megalosaurus,
forty feet long or so, waddling like an elephantine lizard up Holborn
Hill.
</p>
</div>
</section>
.example-container {
border: 0.75em solid #ad1457;
padding: 0.75em;
text-align: left;
position: relative;
width: 100%;
min-height: 200px;
}
#example-element {
background-color: #07136c;
border: 6px solid #ffa000;
color: white;
position: absolute;
inset: 0;
}
構成屬性
此屬性是以下 CSS 屬性的簡寫：
語法
css
/* <length> values */
inset-inline: 3px 10px;
inset-inline: 2.4em 3em;
inset-inline: 10px; /* value applied to start and end */
inset-inline: auto calc(anchor(self-start) + 20px);
inset-inline: 400px anchor-size(--my-anchor height, 100px);
/* <percentage>s of the width or height of the containing block */
inset-inline: 10% 5%;
/* Keyword value */
inset-inline: auto;
/* Global values */
inset-inline: inherit;
inset-inline: initial;
inset-inline: revert;
inset-inline: revert-layer;
inset-inline: unset;
值
inset-inline 屬性接受與 left 屬性相同的值。
正式定義
| 初始值 | 作為簡寫中的每個屬性
|
|---|---|
| 應用於 | 定位元素 |
| 繼承性 | 否 |
| 百分比 | 包含塊的邏輯寬度 |
| 計算值 | 作為簡寫中的每個屬性
|
| 動畫型別 | 一個長度、百分比或 calc()； |
正式語法
inset-inline =
<'top'>{1,2}
<top> =
auto |
<length-percentage> |
<anchor()> |
<anchor-size()>
<length-percentage> =
<length> |
<percentage>
<anchor()> =
anchor( <anchor-name>? &&
<anchor-side> , <length-percentage>? )
<anchor-size()> =
anchor-size( [ <anchor-name> || <anchor-size> ]? , <length-percentage>? )
<anchor-name> =
<dashed-ident>
<anchor-side> =
inside |
outside |
top |
left |
right |
bottom |
start |
end |
self-start |
self-end |
<percentage> |
center
<anchor-size> =
width |
height |
block |
inline |
self-block |
self-inline
示例
設定行內起始和結束偏移量
HTML
html
<div>
<p class="exampleText">Example text</p>
</div>
CSS
css
div {
background-color: yellow;
width: 120px;
height: 120px;
}
.exampleText {
writing-mode: vertical-lr;
position: relative;
inset-inline: 20px 50px;
background-color: #c8c800;
}
結果
規範
| 規範 |
|---|
| CSS 邏輯屬性和值第 1 級 # propdef-inset-inline |
| CSS 定位佈局模組第 3 級 # propdef-inset-inline |
瀏覽器相容性
載入中…
另見
- 對映的物理屬性：
top、right、bottom和left - 對映的物理快捷方式：
inset - 對映的塊級快捷方式：
inset-block writing-mode、direction、text-orientation