inset-block-end
je logična lastnost CSS, ki nastavi dolžino odmika elementa v smeri bloka od končnega roba. To je nekako tako kot razglasitvi bottom
razen svoje končne točke se določi element je direction
, text-orientation
in writing-mode
, tako kot druge logične lastnosti.
Lastnost je del specifikacije CSS logičnih lastnosti in vrednosti 1, ki je trenutno v stanju osnutka urejevalnika. To pomeni, da se lahko definicija in informacije o njej spremenijo od zdaj do uradnega priporočila.
.element ( inset-block-end: 50px; position: relative; /* Apples to positioned elements */ writing-mode: vertical-rl; /* Determines the block start direction */ )
Tako, na primer, če je način pisanja nastavljen horizontal-lr
na inset-block-end
nepremičnine bo deloval tako kot bottom
in nastaviti element je odmik od spodnjega roba. Za position
isti element morate celo navesti eksplicitno, da začne veljati, tako kot bottom
druge lastnosti fizičnega odmika.
Toda spremenite elemente writing-mode
na nekaj takega vertical-lr
in spodnji rob se zasuka v navpični smeri in deluje bolj kot right
lastnost.
Sintaksa
inset-block-end: ;
- Začetna vrednost:
auto
- Velja za: pozicionirane elemente
- Podedovano: ne
- Odstotki: kot za ustrezno fizično lastnost
- Izračunana vrednost: enako kot ustrezna
bottom
lastnost - Vrsta animacije: po izračunani vrednosti
Vrednote
inset-block-end
ima dolžinsko vrednost in podpira globalne ključne besede. Njegova privzeta vrednost je 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;
Podpora brskalnika
IE | Rob | Firefox | Chrome | Safari | Opera |
---|---|---|---|---|---|
Ne | Ne | 63+ | Ne | Ne | Ne |
Android Chrome | Android Firefox | Brskalnik Android | iOS Safari | Opera Mini |
---|---|---|---|---|
Ne | 79+ | Ne | Ne | Ne |
Demo
nadaljnje branje
- Specifikacija logičnih lastnosti in vrednosti CSS 1. stopnje (urednikov osnutek)
- Dokumentacija MDN
- Razumevanje logičnih lastnosti in vrednot (Smashing Magazine)
- Logične lastnosti CSS (Adrian Roselli)
- Dvosmerna horizontalna pravila v CSS (Hussein Al Hammad)