inset-blockrövidített logikai CSS tulajdonság, amely beállítja az elem eltolódásának hosszát a blokkirányban kombinálva inset-block-startés inset-block-end. Ez olyan, mint a deklarálás, topés bottomcsak a kezdő és a végpontot az elem határozza meg direction, text-orientationés writing-modecsakúgy, mint más logikai tulajdonságokat.
A tulajdonság a CSS Logikai tulajdonságok és értékek 1. szintű specifikációjának része, amely jelenleg a Szerkesztő Piszkozat állapotában van. Ez azt jelenti, hogy a definíció és az ezzel kapcsolatos információk változhatnak a hivatalos ajánlás között.
.element ( inset-block: 50px 15%; position: relative; /* Apples to positioned elements */ writing-mode: vertical-rl; /* Determines the block start direction */ )Így például, ha az írás mód beállítása horizontal-lraz inset-blockingatlan jár, mint a beállítás topés bottomés állítsa az elem tolva az alsó szélét. Még egy explicitet is meg kell adnia positionugyanazon az elemen, hogy életbe lépjen, csakúgy, mint a fizikai eltolás tulajdonságai.
De változtassa meg az elemet writing-modevalami hasonlóra, vertical-lrés az „alsó” él függőleges irányban forog, jobban hasonlítva a leftés a righttulajdonságokra.
Szintaxis
inset-block: ;- Kezdő érték:
auto - A következőkre vonatkozik: elhelyezett elemek
- Örökölt: nem
- Százalékok: ami a megfelelő fizikai tulajdonságot illeti
- Számított érték: megegyezik a megfelelővel
topés abottomtulajdonságokkal - Animáció típusa: kiszámított értéktípus szerint
Értékek
inset-blockhosszértéket vesz fel, és támogatja a globális kulcsszavakat. Alapértelmezett értéke auto.
/* Length values */ inset-block: 50px; inset-block: 4em; inset-block: 3.5rem inset-block: 25vh; /* Percentage values */ inset-block: 50%; /* Keyword values */ inset-block: auto; /* initial value */ /* Global values */ inset-block: initial inset-block: inherit; inset-block: unset;Böngésző támogatás
| AZAZ | Él | Firefox | Króm | Szafari | Opera |
|---|---|---|---|---|---|
| Nem | Nem | 63+ | Nem | Nem | Nem |
| Android Chrome | Android Firefox | Android böngésző | iOS Safari | Opera Mini |
|---|---|---|---|---|
| Nem | 79+ | Nem | Nem | Nem |
Demó
További irodalom
- CSS logikai tulajdonságok és értékek 1. szintű specifikáció (a szerkesztő tervezete)
- MDN dokumentáció
- A logikai tulajdonságok és értékek megértése (Smashing Magazine)
- CSS logikai tulajdonságok (Adrian Roselli)
- Kétirányú horizontális szabályok a CSS-ben (Husszein Al Hammad)