inset-block-endon looginen CSS-ominaisuus, joka asettaa pituuden, jonka elementti on siirretty lohkon suunnassa sen loppureunasta. Se on eräänlainen julistaminen, bottompaitsi että sen loppupisteen määrää elementti direction, text-orientationja writing-modeaivan kuten muutkin loogiset ominaisuudet.
Ominaisuus on osa CSS: n loogisten ominaisuuksien ja arvojen tason 1 määritystä, joka on tällä hetkellä Editorin luonnos -tilassa. Tämä tarkoittaa, että sen määritelmä ja tiedot voivat muuttua nykyisen ja virallisen suosituksen välillä.
.element ( inset-block-end: 50px; position: relative; /* Apples to positioned elements */ writing-mode: vertical-rl; /* Determines the block start direction */ )Niinpä esimerkiksi, jos kirjoitus on asetettu tilaan kiinteistön toimii aivan kuten ja asettaa elementin siirtymän alareunasta. Sinun on jopa määritettävä nimenomainen samalle elementille, jotta se voi tulla voimaan, kuten muutkin fyysiset offset-ominaisuudet.horizontal-lrinset-block-endbottompositionbottom
Mutta vaihda elementin writing-modekaltaiseksi vertical-lrja "alareuna" kiertyy pystysuunnassa, joka toimii enemmän kuin rightominaisuus.
Syntaksi
inset-block-end: ;- Alkuarvo:
auto - Koskee: sijoitettuja elementtejä
- Peritty: ei
- Prosenttiosuudet: kuten vastaavan fyysisen omaisuuden kohdalla
- Laskettu arvo: sama kuin vastaava
bottomominaisuus - Animaatiotyyppi: lasketun arvotyypin mukaan
Arvot
inset-block-endvie pituusarvon ja tukee globaaleja avainsanoja. Sen oletusarvo on 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;Selaimen tuki
| IE | Reuna | Firefox | Kromi | Safari | Ooppera |
|---|---|---|---|---|---|
| Ei | Ei | 63+ | Ei | Ei | Ei |
| Android Chrome | Android Firefox | Android-selain | iOS Safari | ooppera Mini |
|---|---|---|---|---|
| Ei | 79+ | Ei | Ei | Ei |
Demo
Lisälukemista
- CSS: n loogisten ominaisuuksien ja arvojen tason 1 määrittely (toimittajan luonnos)
- MDN-dokumentaatio
- Loogisten ominaisuuksien ja arvojen ymmärtäminen (Smashing Magazine)
- CSS: n loogiset ominaisuudet (Adrian Roselli)
- Kaksisuuntaiset horisontaaliset säännöt CSS: ssä (Hussein Al Hammad)