CSS block-size ominaisuus

Edellinen sivu background-size
Seuraava sivu border

Määrittely ja käyttö

block-size Ominaisuus määrittää elementin lohkon suunnan.

Huomioitavaa:liittyviin CSS ominaisuuksiin writing-mode Määrittää lohkon suunnan, mikä vaikuttaa block-size ominaisuuksien tulosta. Englanninkielisillä sivuilla lohkon suunta on alaspäin ja rivejä sisältävän suunta on vasemmalta oikealle.

CSS:n block-size ja inline-size ominaisuudet ovat CSS:n width ja height ominaisuudet ovat hyvin samanlaisia, mutta block-size ja inline-size Ominaisuus riippuu lohkon ja rivejä sisältävän suunnasta.

Esimerkki

Esimerkki 1

Aseta <div> elementin koko lohkossa:

div {
  block-size: 200px;
}

Kokeile itse

Esimerkki 2

Kun <div> elementin writing-mode ominaisuuden arvo asetetaan vertical-rl, lohkon suunta muuttuu alaspäin vaakasuuntaiseksi, mikä muuttaa block-size ominaisuuden vaikutus suuntaa:

div {
  block-size: 250px;
  writing-mode: vertical-rl;
}

Kokeile itse

CSS syntaksi

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

Ominaisuusarvo

Arvo	Kuvaus
auto	Oletus. Elementin oletus block-size arvo.
length	Määritä block-size px, pt, cm ym. yksiköissä. Katso myös:CSS yksiköt.
%	Määritä block-size suhteellisena prosenttina isältä elementiltä vastaavassa akselissa.
initial	Aseta tämä ominaisuus sen oletusarvoon. Katso: initial.
inherit	Periisi tämän ominaisuuden isältä elementiltä. Katso: inherit.

Tekninen yksityiskohta

Oletusarvo:	auto
Perintä:	Ei
Animaatioiden luominen:	Tuki. Katso:Animaatiotutkimus ominaisuudet.
Versio:	CSS3
JavaScript syntaksi:	object.style.blockSize="100px"