CSS max-block-size egenskap

Föregående sida mask-type
Nästa sida max-height

Definition och användning

max-block-size egenskapen den maximala storleken på elementet i blockriktningen.

Om innehållet är mindre än maxvärdet i blockriktningen anger max-block-size egenskapsvärdet fungerar inte.

Om innehållet är större än maxvärdet i blockriktningen tillämpas max-block-size egenskapsvärden.

Observera:relaterade CSS-egenskaper writing-mode Definierar blockriktningen, vilket påverkar max-block-size egenskapers resultat. För engelska sidor är blockriktningen nedåt och inline-riktningen är från vänster till höger.

CSS max-block-size egenskaper jämfört med CSS-egenskaper max-height och max-width Mycket liknande, men max-block-size Egenskapen är beroende av blockriktningen.

Exempel

Exempel 1

Sätt <div>-elementets största storlek i blockriktningen till 60 pixlar:

div {
  max-block-size: 60px;
}

Prova själv

Exempel 2: Skrivningsmodus

Sätt <div>-elementets writing-mode Egenskapsvärdet sätts till vertical-lr, blockriktningen kommer att ändras från nedåt till sidled, vilket påverkar max-block-size Hur egenskapen fungerar:

div {
  max-block-size: 60px;
  writing-mode: vertical-lr;
}

Prova själv

Exempel 3: Max-block-size vs Block-size

Observera ett <div>-element (block-size 100px) och en annan <div>-element (max-block-size Forskjellige reaktioner vid förändring av innehållsstorlek (100px):

#div1 {
  max-block-size: 100px;
}
#div2 {
  block-size: 100px;
}

Prova själv

CSS-syntax

max-block-size: auto|length|initial|inherit;

Egenskapsvärde

Värde	Beskrivning
auto	Standard. Elementets standard max-block-size-värde.
length	Specificera max-block-size, enheter som px, pt, cm osv. Se:CSS units.
%	Specificera en procentsats av storleken på föräldrelementet på motsvarande axel max-block-size.
initial	Sätt detta egenskap till dess standardvärde. Se: initial.
inherit	Inheritera detta egenskap från föräldrelementet. Se: inherit.

Tekniska detaljer

Standardvärde:	auto
Arvbarhet:	Nej
Animation production:	Stöd. Se:Animation relaterade egenskaper.
Version:	CSS3
JavaScript-syntax:	object.style.maxBlockSize="60px"