CSS inset-block-start ominaisuus

Määrittely ja käyttö

inset-block-start ominaisuus asettaa elementin lohkon suunnan alkupään etäisyys vanhemmalta elementiltä.

Huomioitavaa:Totta kai, jotta tämä ominaisuus vaikuttaisi, täytyy määrittää position ominaisuuksien kanssa.

CSS:n inset-inline ja inset-block ominaisuudet ovat CSS:n top,bottom,left ja right ominaisuudet ovat hyvin samanlaisia, mutta inset-block ja inset-inline Ominaisuus riippuu lohkon ja rivin suunnasta.

Huomioitavaa:liittyviin CSS-ominaisuuksiin writing-mode Määrittelee lohkon suunnan. Tämä vaikuttaa lohkon alkupään ja loppupään sijaintiin sekä inset-block-start Ominaisuuden tuloksen. Englanninkielisillä sivuilla lohkon suunta on alas ja rivin suunta vasemmalta oikealle.

Esimerkki

Esimerkki 1

Aseta sijoitettu <div>-elementin lohkon suunnan alkupään etäisyys vanhemmalta elementiltä:

div {
  inset-block-start: 50px;
}

Kokeile itse

Esimerkki 2

Kun <div>-elementin writing-mode Kun ominaisuus asetetaan vertical-rl:ksi, lohkon suunta on oikealta vasemmalle. Tämä tarkoittaa, että elementin alkupää siirtyy ylhäältä oikealle:

div {
  inset-block-start: 50px;
  writing-mode: vertical-rl;
}

Kokeile itse

CSS-kieli

inset-block-start: auto|length|initial|inherit;

Ominaisuuden arvo

Arvo Kuvaus
auto Oletusarvo. Käytä elementin oletusarvoista inset-etäisyyttä.
length

Määritä etäisyys kiinteinä yksiköinä (esim. px, pt, cm jne.). Sallitaan negatiiviset arvot.

Katso:CSS yksiköt.
% Määritä etäisyys prosentteina, suhteessa vanhemman elementin siihen akseliin.
initial Aseta tämä ominaisuus sen oletusarvon arvoon. Katso: initial.
inherit Perii tämän ominaisuuden vanhemmalta elementiltä. Katso: inherit.

Tekninen yksityiskohta

Oletusarvo: auto
Perintä: Ei
Animaation luominen: Tuki. Katso:Animaatiot.
Versio: CSS3
JavaScript-kieli: object.style.insetBlockStart="100px"

Selaimen tuki

Taulukon numerot ilmaisevat ensimmäisen täysin tukevan selaimen version.

Chrome Edge Firefox Safari Opera
87.0 87.0 63.0 14.1 73.0

Liittyvät sivut

Oppitunnit:CSS sijoittelu

Viittaukset:CSS position ominaisuus

Viittaukset:CSS writing-mode ominaisuus