inset-block-endegy logikus CSS tulajdonság, amely megadja azt a hosszat, amelyet az elem a blokk irányában eltol a végétől. Ez olyan, mint a deklarálás, bottomazzal a különbséggel, hogy a végpontját 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-end: 50px; 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-block-endingatlan jár, mint bottom, és állítsa be az elem tolva az alsó szélét. Sőt, meg kell adnia egy explicit szót positionugyanazon az elemen, hogy életbe lépjen, csakúgy, mint a bottomtöbbi fizikai eltolási tulajdonság.
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 righttulajdonságra.
Szintaxis
inset-block-end: ;- 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ő
bottomtulajdonsággal - Animáció típusa: kiszámított értéktípus szerint
Értékek
inset-block-endhosszértéket vesz fel, és támogatja a globális kulcsszavakat. Alapértelmezett értéke auto.
/* Length values */ inset-block-end: 50px; inset-block-end: 4em; inset-block-end: 3.5rem inset-block-end: 25vh; /* Percentage values */ inset-block-end: 50%; /* Keyword values */ inset-block-end: auto; /* initial value */ /* Global values */ inset-block-end: initial inset-block-end: inherit; inset-block-end: 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)