Kastenmodell

The CSS Podcast – 001: The Box Model

Angenommen, Sie haben folgenden HTML-Code:

<p>I am a paragraph of text that has a few words in it.</p>

Dann schreiben Sie dieses CSS dafür:

p {
  width: 100px;
  height: 50px;
  padding: 20px;
  border: 1px solid;
}

Der Inhalt hat eine Breite von 142 Pixel anstelle der von Ihnen angegebenen 100 Pixel. aus deinem Element herausbricht. Warum?

Das Boxmodell ist die zentrale Grundlage von CSS. Verstehen, wie das Box-Modell von anderen Aspekten von CSS und, was wichtig ist, können Sie besser vorhersehbare CSS-Elemente schreiben.

Wenn Sie das Boxmodell von CSS kennen, können Sie herausfinden, Inhalt passt nicht in ein Element.

Denken Sie daran, dass alles, was von CSS angezeigt wird, ein Feld ist, auch wenn Es ist nur Text oder hat ein border-radius, das ihn wie einen Kreis aussieht.

Inhalt und Größe

Das Verhalten von Boxen hängt vom display-Wert, ihrem Set Dimensionen und dem darin enthaltenen Inhalt. Diese Inhalte können nur Text sein oder mehr von untergeordneten Elementen erzeugte Felder. In beiden Fällen wirkt sich der Inhalt in das Feld ein.

Dies lässt sich mit der extrinsischen Größenanpassung oder mit der systeminternen Größenanpassung steuern. damit der Browser anhand der Inhaltsgröße Entscheidungen treffen kann.

Hier ist eine einfache Demo, in der der Unterschied erklärt wird:

Bei Box mit Außengröße um zu beschränken, wie viele Inhalte Sie hinzufügen können, bevor diese aus dem Feld überlaufen. Das macht das Wort „toll“ Überlauf.

In der Demo steht „CSS ist toll“. in einem Feld mit festen Abmessungen und einem dicke Rahmenlinie. Da das Feld eine bestimmte Breite hat, hat es eine äußere Größe. Das bedeutet, dass die Größe des untergeordneten Inhalts bestimmt wird. Das Wort "toll" ist zu groß für die Box, sodass sie außerhalb des Rahmenbox (mehr dazu später). Um diesen Überlauf zu verhindern, dass die Box eine unveränderliche Größe hat, indem entweder die Breite nicht festgelegt wird, indem Sie width auf min-content setzen. Mit dem Schlüsselwort min-content wird das Feld angewiesen, so breit sein wie die unveränderliche Mindestbreite seines Inhalts (das Wort „fantastisch“). So passt das Feld perfekt um den Text.

Hier ist ein komplexeres Beispiel, das die Auswirkungen unterschiedlicher Größen auf die tatsächliche Inhalt:

Mit dieser Funktion können Sie die ein Element. Die unveränderliche Größe verhindert Textüberlauf.

Sie können die eigenständige Größenanpassung aktivieren und deaktivieren, um zu sehen, wie Sie mit der externen Größenanpassung mehr erreichen. durch extrinsische und unveränderliche Größenanpassung verleiht dem Inhalt mehr Steuerung. Fügen Sie der Karte einige Sätze Text hinzu, um die Effekte zu sehen. Wenn dieses Element über externe Größen verfügt, ist die Menge der Inhalte, hinzugefügt werden kann, bevor es überläuft. Das passiert jedoch nicht, wenn die unveränderliche Größe aktiviert ist.

Standardmäßig hat dieses Element einen festgelegten width und height von jeweils 400px. Diese Dimensionen geben strikte Grenzen für alles innerhalb des Elements an, also berücksichtigt, es sei denn, der Inhalt ist zu groß für das Feld. Sie können sich das in Aktion ansehen. indem die Bildunterschrift unter dem Blumenbild so geändert wird, dass sie Höhe der Box.

Schlüsselbegriff: Überlauf tritt auf, wenn der Inhalt zu groß für das Feld ist, in dem er sich befindet. Sie können Mit dem Attribut overflow können Sie festlegen, wie ein Element mit Überlaufinhalten umgeht.

Wenn Sie zur unveränderlichen Größe wechseln, die Größe des Feldinhalts. Der Überlauf ist so viel weniger wahrscheinlich, die Größe an den Inhalt anpasst.

Denken Sie daran, dass die unveränderliche Größe die Standardeinstellung und bietet in der Regel viel mehr Flexibilität als externe Größen.

Die Bereiche des Boxmodells

Boxen bestehen aus verschiedenen Boxmodellbereichen, die alle eine bestimmte Aufgabe erfüllen.

<ph type="x-smartling-placeholder">
</ph> Ein Diagramm, das die vier Hauptbereiche des Boxmodells zeigt: Inhaltsfeld, Innenrand, Rahmenrahmen und Randfeld
Die vier Hauptbereiche des Boxmodells: Inhaltsfeld, Padding-Feld, Rahmenrahmen und ein.

Das Inhaltsfeld ist der Bereich, in dem sich die Inhalte befinden. Der Inhalt kann steuern Sie die Größe des übergeordneten Bereichs.

Der Innenrand umgibt den Inhaltsrahmen. Er ist der Bereich, der vom padding. Da sich der Innenrand innerhalb des Rechtecks befindet, ist der Hintergrund der Box im Bereich sichtbar. erstellt wird. Wenn für das Feld Überlaufregeln festgelegt sind, z. B. overflow: auto oder overflow: scroll, werden auch hier die Bildlaufleisten eingeblendet.

Bildlaufleisten befinden sich im Abstandsfeld.

Der Rahmen umgibt den Innenrand. Sein Platz wird durch den border-Wert, der einen visuellen Frame für das Element. Der Rahmenrand des Elements ist der was Sie sehen können.

Der letzte Bereich, das Rahmenfeld, ist der Bereich um den Kasten herum. Dieser wird durch das Feld margin-Regel des Feldes. Eigenschaften wie outline und box-shadow die auch diesen Bereich einnehmen, da sie über das Element gemalt werden auf die Größe der Box. outline-width von 200px für deine Box wird geändert innerhalb des Rahmens ändert sich nichts.

Ein breiter Umriss wirkt sich nicht auf die Größe des übrigen Elements aus.

Eine nützliche Analogie

Das Boxmodell ist komplex zu verstehen. Hier ist eine Analogie zu dem, was Sie was Sie bisher gelernt haben.

<ph type="x-smartling-placeholder">
</ph> Drei Bilderrahmen.
Das Kastenmodell, illustriert mit physischen Bilderrahmen.

In diesem Diagramm sind drei Bilderrahmen nebeneinander auf einem Mauer. Elemente des gerahmten Bildes entsprechen dem Boxmodell folgendermaßen:

  • Das Inhaltsfeld ist das Artwork.
  • Der Polsterkasten ist die weiße Wandhalterung zwischen Rahmen und Kunstwerk.
  • Das Rahmenfeld ist der Rahmen und stellt einen tatsächlichen Rahmen für das Artwork dar.
  • Das Randfeld ist der Abstand zwischen den Frames.
  • Der Schatten nimmt den gleichen Platz ein wie das Randfeld.

Fehler am Box-Modell beheben

Browser-Entwicklertools bieten eine Visualisierung des Boxmodells eines ausgewählten Felds mit denen Sie verstehen, wie das Box-Modell funktioniert sich auf die Website auswirkt, an der Sie arbeiten.

Versuchen Sie Folgendes in Ihrem eigenen Browser:

  1. Öffnen Sie die Entwicklertools.
  2. Wählen Sie ein Element aus.
  3. Rufen Sie den Debugger für Boxmodelle auf.
<ph type="x-smartling-placeholder">
</ph>
Der Boxmodell-Debugger für die Outline-Demo

Boxmodell steuern

Um zu verstehen, wie das Boxmodell gesteuert wird, müssen Sie zunächst verstehen, in Ihrem Browser.

Jeder Browser wendet ein User-Agent-Stylesheet auf HTML-Dokumente an, mit dem wie Elemente aussehen und verhalten werden, wenn sie nicht über definierten CSS-Code verfügen. Das Preisvergleichsportal in User-Agent-Style Sheets variieren je nach Browser, bieten aber sinnvolle um die Lesbarkeit von Inhalten zu verbessern.

Eine Eigenschaft, die über das User-Agent-Stylesheet den Standardwert display für ein Feld festlegt. Für In einem normalen Ablauf ist der Standardwert für display eines <div>-Elements beispielsweise block hat <li> den standardmäßigen display-Wert list-item und <span> hat den Standardwert für display inline.

Ein inline-Element hat einen Blockrand, der von anderen Elementen jedoch nicht berücksichtigt wird. Bei inline-block berücksichtigen andere Elemente den Blockrand, aber das erste -Elements behält fast das gleiche Verhalten wie ein inline-Element bei. Ein block-Element füllt standardmäßig den verfügbaren Inline-Bereich aus, wohingegen Die Elemente inline und inline-block sind nur so groß wie ihr Inhalt.

Im User-Agent-Stylesheet wird auch box-sizing festgelegt. Damit wird einem Feld mitgeteilt, wie und berechnen die Box-Größe. Standardmäßig haben alle Elemente den folgenden User-Agent Stil: box-sizing: content-box;. Wenn Sie also Dimensionen wie als width und height gelten diese Abmessungen für das Inhaltsfeld. Wenn Sie und dann padding und border festlegen, werden diese Werte dem Feld Größe.

Wissen testen

Testen Sie Ihr Wissen über die Eigenschaften der Boxmodellgröße.

.my-box {
  width: 200px;
  border: 10px solid;
  padding: 20px;
}

Wie breit wird .my-box sein?

200 Pixel
Da der Standardwert für box-sizing die Felder "content-box", der Breite hinzugefügt. 200px wäre richtig, wenn die Box hatte box-sizing: border-box.
260 Pixel
Die Standardgröße ist „content-box“, d. h. Rahmenlinien hinzugefügt werden.

Die tatsächliche Breite dieses Feldes beträgt 260 Pixel. Da das CSS den Standardwert box-sizing: content-box verwendet, ist die angewendete Breite die Breite des Inhalts und padding und border auf beiden Seiten werden zu 200 Pixel für den Inhalt + 40 Pixel Abstand + 20 Pixel Rand ergeben eine Gesamtsumme. eine sichtbare Breite von 260 Pixeln.

Sie können dies ändern, indem Sie die Größe für border-box angeben:

.my-box {
  box-sizing: border-box;
    width: 200px;
    border: 10px solid;
    padding: 20px;
}

Dieses alternative Boxmodell weist CSS an, das width auf das Rahmenfeld anzuwenden. anstelle des Inhaltsfelds. Das bedeutet, dass border und padding hinzugefügt. Wenn Sie .my-box auf 200px breit festlegen, wird das Ergebnis Breite: 200px.

In der folgenden interaktiven Demo sehen Sie, wie das funktioniert. Wenn Sie die Option box-sizing ist, zeigt der blaue Bereich, welches CSS innerhalb des .

Vergleichen Sie die Auswirkungen der Größenanpassung mit Inhaltsrahmen und Rahmengröße.
*,
*::before,
*::after {
  box-sizing: border-box;
}

Diese CSS-Regel wählt jedes Element im Dokument aus und jedes Pseudoelement ::before und ::after und wendet box-sizing: border-box an. Das bedeutet, dass nun für jedes Element dieses alternative Boxmodell verwendet wird.

Da das alternative Boxmodell vorhersehbarer sein kann, fügen Entwickler oft auf Zurücksetzen und Normalisierer, wie diese.

Ressourcen

User-Agent-Stylesheets