inset-block-startegy logikus CSS tulajdonság, amely megadja azt a hosszat, amelyet egy elem eltol a blokk irányában a kezdő élétől. Ez olyan, mint a deklarálás, topazzal a különbséggel, hogy a kiindulási pontot az elem határozza meg direction, text-orientationés writing-modecsakúgy, mint a többi logikai tulajdonság.
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-start: 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-startingatlan jár, mint top, és állítsa be az elem tolva ez kezd él, ami a tetején. Sőt, meg kell adnia egy explicit szót positionugyanazon az elemen, hogy életbe lépjen, csakúgy, mint a toptöbbi fizikai eltolási tulajdonság.
De változtassa meg az elemet writing-modevalami hasonlóra, vertical-rlés a kezdőél függőleges irányban forog, jobban hasonlítva a lefttulajdonságra.
Szintaxis
inset-block-start: ;- 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ő
toptulajdonsággal - Animáció típusa: kiszámított értéktípus szerint
Értékek
inset-block-starthosszértéket vesz fel, és támogatja a globális kulcsszavakat. Alapértelmezett értéke auto.
/* Length values */ inset-block-start: 50px; inset-block-start: 4em; inset-block-start: 3.5rem inset-block-start: 25vh; /* Percentage values */ inset-block-start: 50%; /* Keyword values */ inset-block-start: auto; /* initial value */ /* Global values */ inset-block-start: initial inset-block-start: inherit; inset-block-start: 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)