inset-block-endyra logiška CSS ypatybė, nustatanti ilgį, kurį elementas nukreipia bloko kryptimi nuo jo pabaigos krašto. Tai tarsi skelbiantis bottomišskyrus savo galutiniam taške nustatoma pagal elemento direction, text-orientationir writing-mode, kaip ir kitų loginių savybių.
Nuosavybė yra CSS loginių ypatybių ir reikšmių 1 lygio specifikacijos dalis, kuri šiuo metu yra redaktoriaus juodraščio būsenoje. Tai reiškia, kad apibrėžimas ir informacija apie jį gali pasikeisti nuo dabar iki oficialios rekomendacijos.
.element ( inset-block-end: 50px; position: relative; /* Apples to positioned elements */ writing-mode: vertical-rl; /* Determines the block start direction */ )Taigi, pavyzdžiui, jei rašymo režimas horizontal-lrsu inset-block-endturto veiks kaip bottomir nustatykite elemento poslinkis nuo apatinio krašto. Tam, positionkad jis įsigaliotų, jums tame pačiame elemente netgi reikia nurodyti aiškų žodį, kaip bottomir kitas fizinio poslinkio savybes.
Bet pakeiskite elementą writing-modeį kažką panašaus vertical-lrir „apatinis“ kraštas pasisuks vertikalia kryptimi, veikdamas labiau kaip rightnuosavybė.
Sintaksė
inset-block-end: ;- Pradinė vertė:
auto - Taikoma: išdėstytiems elementams
- Paveldima: ne
- Procentai: kaip ir atitinkamai fizinei nuosavybei
- Apskaičiuota vertė: tokia pati kaip ir atitinkama
bottomsavybė - Animacijos tipas: pagal apskaičiuotą vertės tipą
Vertybės
inset-block-endužima ilgio vertę ir palaiko pasaulinius raktinius žodžius. Numatytoji jo vertė yra 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;Naršyklės palaikymas
| T.Y | Briauna | „Firefox“ | „Chrome“ | „Safari“ | Opera |
|---|---|---|---|---|---|
| Ne | Ne | 63+ | Ne | Ne | Ne |
| „Android Chrome“ | „Android Firefox“ | „Android“ naršyklė | „iOS Safari“ | „Opera Mini“ |
|---|---|---|---|---|
| Ne | 79+ | Ne | Ne | Ne |
Demonstracija
Papildoma literatūra
- CSS loginių ypatybių ir reikšmių 1 lygio specifikacija (redaktoriaus juodraštis)
- MDN dokumentacija
- Suprasti logines savybes ir vertybes (žurnalas „Smashing“)
- CSS loginės savybės (Adrianas Roselli)
- Dvipusės horizontaliosios taisyklės CSS (Hussein Al Hammad)