Attribut max-block-size CSS

Page précédente mask-type
Page suivante max-height

Définition et utilisation

max-block-size l'attribut spécifie la taille maximale de l'élément dans la direction du bloc.

Si la taille du contenu dans la direction du bloc est inférieure à la valeur maximale, alors max-block-size valeur de l'attribut n'a pas d'effet.

Si la taille du contenu dans la direction du bloc dépasse la valeur maximale, l'attribut max-block-size valeur de l'attribut.

Attention :les attributs CSS associés writing-mode Définit la direction du bloc, ce qui affecte max-block-size les résultats des attributs. Pour les pages en anglais, la direction du bloc est vers le bas et la direction en ligne est de gauche à droite.

CSS max-block-size les attributs sont comparables aux attributs CSS max-height et max-width Très semblable, mais max-block-size L'attribut dépend de la direction du bloc.

Instance

Exemple

Exemple 1

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

Essayez-le vous-même

Exemple 2 : Mode d'écriture

Réglez la taille maximale en bloc de l'élément <div> sur 60 pixels : writing-mode Si l'attribut est réglé sur vertical-lr, la direction du bloc passera de vertical à latérale, ce qui affectera max-block-size Fonctionnement de l'attribut :

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

Essayez-le vous-même

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

Observons un élément <div> (block-size à 100px) et un autre élément <div> (max-block-size différents comportements à la variation de la taille du contenu (100px)

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

Essayez-le vous-même

Syntaxe CSS

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

Valeur de l'attribut

Valeur	Description
auto	Par défaut. La valeur par défaut de max-block-size de l'élément.
length	Définir max-block-size, en px, pt, cm, etc. Voir :Unités CSS.
%	Définir la taille en pourcentage par rapport à l'axe correspondant de l'élément parent max-block-size.
initial	Récupère la valeur par défaut de cette propriété. Voir initial.
inherit	Inherits this property from its parent element. Voir inherit.

Détails techniques

Valeur par défaut :	auto
Héritabilité :	Non
Réalisation des animations :	Prise en charge. Voir :Propriétés liées aux animations.
Version :	CSS3
Syntaxe JavaScript :	object.style.maxBlockSize="60px"