CSS - max-block-size Eigenschaft: Ein freundlicher Leitfaden für Anfänger

Hallo da draußen, zukünftige CSS-Zauberer! Heute machen wir uns auf eine aufregende Reise in die Welt der CSS, Specifically erkunden wir die max-block-size Eigenschaft. Machen Sie sich keine Sorgen, wenn Sie neu in diesem Bereich sind; ich werde Ihr freundlicher Guide sein, und wir werden dieses Thema Schritt für Schritt angehen. Also holen Sie sich Ihr Lieblingsgetränk, machen Sie es sich gemütlich, und Tauchen wir ein!

Was ist max-block-size?

Bevor wir ins Detail gehen, lassen Sie uns verstehen, worum es bei max-block-size geht. Stellen Sie sich vor, Sie bauen einen Turm aus Blöcken. Die max-block-size Eigenschaft ist so, als ob Sie eine Grenze für die Höhe Ihres Turms setzen. In CSS-Begriffen definiert sie die maximale Größe eines Elements in die Blockrichtung.

"Aber warten", fragen Sie sich vielleicht, "was ist die Blockrichtung?" Tolle Frage! Die Blockrichtung ist normalerweise die vertikale Richtung in horizontal geschriebenen Sprachen (wie Englisch) und die horizontale Richtung in vertikal geschriebenen Sprachen (wie traditionellem Japanisch).

Syntax und mögliche Werte

Schauen wir uns an, wie wir max-block-size in unserem CSS verwenden können:

.mein-element {
max-block-size: wert;
}

Jetzt, was können wir anstelle von "wert" einsetzen? Hier ist eine praktische Tabelle mit allen möglichen Werten:

Wert	Beschreibung
<length>	Eine feste Länge, wie 300px oder 20em
<percentage>	Ein Prozentsatz der Größe des umgebenden Blocks
none	Keine Begrenzung (dies ist die Voreinstellung)
max-content	Die intrinsische bevorzugte maximale Größe
min-content	Die intrinsische minimale Größe
fit-content	Ähnlich wie auto, aber mit einigen Unterschieden
auto	Der Browser entscheidet über die maximale Größe

Anwendungsbereich

Nicht alle CSS-Eigenschaften gelten für jedes HTML-Element. Die max-block-size Eigenschaft gilt für alle Elemente außer:

• Nicht-ersetzte inline-Elemente
• Tabellenzeilen
• Zeilen groups

Machen Sie sich keine Sorgen, wenn Sie diese Begriffe noch nicht kennen. Wenn Sie in Ihrer CSS-Reise fortschreiten, werden Sie sie kennenlernen und verstehen, warum sie Ausnahmen sind.

CSS max-block-size - writing-mode Effekte

Jetzt wird es interessant! Die max-block-size Eigenschaft ändert ihr Verhalten basierend auf der writing-mode des Textes. Lassen Sie uns einige Beispiele ansehen:

Beispiel 1: Horizontale Schreibweise

.box {
writing-mode: horizontal-tb;
max-block-size: 200px;
background-color: lightblue;
padding: 10px;
}

<div class="box">
Dies ist eine Box mit horizontaler Schreibweise und max-block-size auf 200px gesetzt.
</div>

In diesem Beispiel wird max-block-size die Höhe der Box auf 200 Pixel begrenzen, da die Blockrichtung in horizontaler Schreibweise vertikal ist.

Beispiel 2: Vertikale Schreibweise

.box {
writing-mode: vertical-rl;
max-block-size: 200px;
background-color: lightgreen;
padding: 10px;
}

<div class="box">
Dies ist eine Box mit vertikaler Schreibweise und max-block-size auf 200px gesetzt.
</div>

In diesem Fall wird max-block-size die Breite der Box auf 200 Pixel begrenzen, da die Blockrichtung in vertikaler Schreibweise horizontal ist.

CSS max-block-size - Wert

Wenn wir eine Längenangabe verwenden, setzen wir eine feste maximale Größe. Sehen wir es in Aktion:

.fixed-size {
max-block-size: 150px;
background-color: lightyellow;
padding: 10px;
}

<div class="fixed-size">
Diese Box hat eine max-block-size von 150px. Wenn der Inhalt diese Höhe überschreitet, wird er überlaufen.
</div>

In diesem Beispiel, egal wie viel Inhalt wir in das div setzen, wird es nicht höher als 150 Pixel werden.

CSS max-block-size - Wert

Prozentsätze sind proportional zur Größe des umgebenden Blocks. So funktioniert es:

.eltern {
height: 300px;
background-color: lightgray;
}

.kind {
max-block-size: 50%;
background-color: lightpink;
padding: 10px;
}

<div class="eltern">
<div class="kind">
Diese Kind-Box hat eine max-block-size von 50% der Höhe ihrer Eltern.
</div>
</div>

In diesem Fall wird die Kind-Box nie höher als die Hälfte der Höhe ihrer Eltern sein.

CSS max-block-size - Wert

Der max-content Wert ist besonders nützlich, wenn Sie möchten, dass Ihr Element so groß wie sein Inhalt erforderlich ist, aber nicht größer. Sehen wir uns ein Beispiel an:

.max-content-box {
max-block-size: max-content;
background-color: lightcoral;
padding: 10px;
}

<div class="max-content-box">
Diese Box wird sich erweitern, um ihren Inhalt zu fassen, aber nicht darüber hinaus.
</div>

Diese Box wird wachsen, um ihren Inhalt aufzunehmen, aber nicht darüber hinaus.

CSS max-block-size - Mit horizontaler und vertikaler Text

Lassen Sie uns mit einem Beispiel abschließen, das horizontale und vertikale Text kombiniert:

.mixed-text {
max-block-size: 200px;
background-color: lavender;
padding: 10px;
}

.vertical-text {
writing-mode: vertical-rl;
max-block-size: 100px;
background-color: lightsalmon;
margin-top: 10px;
}

<div class="mixed-text">
Dies ist horizontaler Text mit max-block-size von 200px.
<div class="vertical-text">
Dies ist vertikaler Text mit max-block-size von 100px.
</div>
</div>

In diesem Beispiel haben wir einen Container mit horizontalen Text und einer maximalen Höhe von 200px. Innen haben wir eine andere div mit vertikalem Text und einer maximalen Breite von 100px.

Und da haben Sie es! Wir haben die max-block-size Eigenschaft aus verschiedenen Blickwinkeln erkundet. Denken Sie daran, der Schlüssel zum Beherrschen von CSS ist die Übung. Also fürchten Sie sich nicht, diese Beispiele zu experimentieren, zu ändern und zu sehen, was passiert. Frohes Coden und möge Ihre Blöcke immer die perfekte Größe haben!

Credits: Image by storyset