inset-block-start
yra logiška CSS ypatybė, nustatanti ilgį, kurį elementas nukreipia bloko kryptimi nuo jo pradžios krašto. Tai tarsi skelbiantis top
išskyrus jo atspirties taškas yra nustatoma pagal elemento direction
, text-orientation
ir 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-start: 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-lr
su inset-block-start
turto veiks kaip top
ir nustatykite elemento poslinkis nuo to pradeda kraštą, kuris yra viršuje. Tam, position
kad jis įsigaliotų, jums tame pačiame elemente netgi reikia nurodyti aiškų žodį, kaip top
ir kitas fizinio poslinkio savybes.
Bet pakeiskite elementą writing-mode
į kažką panašaus vertical-rl
ir pradinis kraštas pasisuks vertikalia kryptimi, veikdamas labiau kaip left
nuosavybė.
Sintaksė
inset-block-start: ;
- Pradinė vertė:
auto
- Taikoma: išdėstytiems elementams
- Paveldima: ne
- Procentai: kaip ir atitinkamai fizinei nuosavybei
- Apskaičiuota vertė: tokia pati kaip ir atitinkama
top
savybė - Animacijos tipas: pagal apskaičiuotą vertės tipą
Vertybės
inset-block-start
užima ilgio vertę ir palaiko pasaulinius raktinius žodžius. Numatytoji jo vertė yra 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;
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)