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.
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:
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:
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">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.
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.
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">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:
- Öffnen Sie die Entwicklertools.
- Wählen Sie ein Element aus.
- Rufen Sie den Debugger für Boxmodelle auf.
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?
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
.
*,
*::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.