CSS max-block-size Eigenschaft

Definition und Verwendung

max-block-size Eigenschaft legt die maximale Größe des Elements in der Blockrichtung fest.

Wird die Größe des Inhalts in der Blockrichtung kleiner als der maximale Wert, dann max-block-size Eigenschaftswerte haben keine Wirkung.

Wird die Größe des Inhalts in der Blockrichtung größer als der maximale Wert, wird max-block-size Eigenschaftswerte.

Hinweis:zugehörigen CSS-Eigenschaften writing-mode Definiert die Blockrichtung, was die max-block-size Ergebnisse der Eigenschaften. Für englische Seiten ist die Blockrichtung nach unten und die Inline-Richtung von links nach rechts.

CSS max-block-size Eigenschaften entsprechen den CSS-Eigenschaften max-height und max-width Sehr ähnlich, aber max-block-size Die Eigenschaft hängt von der Blockrichtung ab.

Beispiel

Beispiel 1

Setzen Sie die maximale Größe des <div>-Elements in der Blockrichtung auf 60 Pixel:

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

Probieren Sie es selbst aus

Beispiel 2: Schreibmodus

Den <div>-Element writing-mode Wenn die Eigenschaftswerte auf vertical-lr gesetzt werden, ändert sich die Blockrichtung von nach unten zu seitlich, was die max-block-size Wie die Eigenschaft funktioniert:

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

Probieren Sie es selbst aus

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

Beobachten Sie ein <div>-Element (block-size und einem anderen <div>-Element (max-block-size unterschiedliche Reaktionen bei Änderungen der Inhaltsgröße (100px):

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

Probieren Sie es selbst aus

CSS-Syntax

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

Eigenschaftswert

Wert Beschreibung
auto Standard. Der Standardwert von max-block-size für das Element.
length Geben Sie max-block-size in Einheiten wie px, pt, cm an. Siehe:CSS-Einheiten.
% Geben Sie die Größe in Prozent der Größe des übergeordneten Elements entlang der entsprechenden Achse an max-block-size.
initial Diese Eigenschaft auf ihren Standardwert setzen. Siehe initial.
inherit Diese Eigenschaft wird von ihrem übergeordneten Element geerbt. Siehe inherit.

Technische Details

Standardwert: auto
Vererbbarkeit: Nein
Animationserstellung: Unterstützt. Siehe:Eigenschaften, die mit Animationen zusammenhängen.
Version: CSS3
JavaScript-Syntax: object.style.maxBlockSize="60px"

Browser-Unterstützung

Die Zahlen in der Tabelle stellen die Versionsnummer des ersten Browsers dar, der diese Eigenschaft vollständig unterstützt.

Chrome Edge Firefox Safari Oper
57.0 79.0 41.0 12.1 44.0

Verwandte Seiten

Referenz:CSS block-size Eigenschaft

Referenz:CSS min-block-size Eigenschaft

Referenz:CSS max-height Eigenschaft

Referenz:CSS max-width Eigenschaft

Referenz:CSS writing-mode Eigenschaft