Ausführliche Erläuterung des CSS-Box-Modells sowie von Block- und Inline-Elementen

Dieser Artikel beschreibt das CSSBox-Modell sowie Block-Level- und Inline-Elemente

1. CSS-Box-Modell

Übersicht über das Box-Modell

Box-Modell ist einer der Kernwissenspunkte von CSS, der angibt, wie Elemente angezeigt werden und wie sie miteinander interagieren. Jedes Element auf der Seite wird als rechteckiges Feld behandelt, das aus dem Inhalt des Elements,

Abständen, Rändern und Rändern besteht. Wie unten gezeigt:

Um den Inhaltsbereich herum wird eine Auffüllung angezeigt. Wenn Sie einem Element einen Hintergrund hinzufügen, wird der Hintergrund auf den Bereich angewendet, der aus dem Inhalt und der Polsterung des Elements besteht. Mithilfe von Polsterungen können Sie also eine Barriere um Ihren Inhalt herum erstellen, sodass er nicht mit dem Hintergrund verschmilzt. Durch das Hinzufügen eines Rahmens wird eine Linie außerhalb des Füllbereichs hinzugefügt. Diese Linien können unterschiedliche Stile und Breiten haben, z. B. durchgezogen, gestrichelt, gepunktet und gestrichelt. Außerhalb des Randes befindet sich der Rand, der transparent ist und im Allgemeinen zur Steuerung des Abstands zwischen Elementen verwendet wird.

Abstände, Ränder und Ränder können auf alle Seiten eines Elements oder auf einzelne Seiten angewendet werden, wie zum Beispiel:

padding-top:20px; //Legen Sie die obere Polsterung padding:15px einzeln fest; //Alle Polsterungen des Elements sind 15pxpadding:1px 2px 3px 4px; //Legen Sie die Polsterung separat fest Seite in der Reihenfolge oben, rechts, unten, links/*äußerer Randmargin Verwendung ist die gleiche wie padding*/ border-top:1px solid #ccc; Legen Sie den oberen Rand für das Element individuell fest: 2px gestrichelt #000; //Legen Sie den Rand für alle Seiten fest

Boxmodell im Standardmodus und gemischten Modus

Was sind Standardmodus und Promiscuous-Modus?

Als Browseranbieter begannen, standardkonforme Browser zu entwickeln, wollten sie die Abwärtskompatibilität sicherstellen. Um dies zu erreichen, haben sie zwei Rendering-Modi erstellt: Standard und Promiscuous. Im Standardmodus stellt der Browser die Seite gemäß der Spezifikation dar; im gemischten Modus wird die Seite weniger abwärtskompatibel angezeigt. Der gemischte Modus emuliert normalerweise das

Verhalten älterer Browser, um zu verhindern, dass ältere Websites nicht funktionieren.

So unterscheidet man zwischen Standardmodus und gemischtem Modus

Der Browser wählt die zu verwendende Rendering-Methode basierend darauf aus, ob der DOCTYPE (Dokumentdeklaration) vorhanden ist und welche

DTD verwendet wird . Wenn ein XHTML- und HTML-Dokument einen wohlgeformten DOCTYPE enthält, wird es im Allgemeinen im Standardmodus gerendert. Im Gegenteil, wenn der DOCTYPE des Dokuments nicht existiert oder falsch formatiert ist, führt dies dazu, dass HTML und XHTML im gemischten Modus gerendert werden.

Box-Modelle in zwei Modi

Die tatsächliche Breite der Box im Standardmodus beträgt:

Breite +
Polsterung- left + padding-right + border-left-width + border-right-width

Die tatsächliche Höhe ist:

heigth + padding-top +

padding-bottom + border-top-width + border-bottom-width

Die tatsächliche Breite der Box im gemischten Modus ist: der eingestellte Breitenwert In CSS ist die Höhe der eingestellte Höhenwert. Wenn

Überlauf nicht festgelegt ist und der Wert des Boxinhalts, der Polsterung oder des Rahmens groß ist, wird die Box natürlich gestreckt und die tatsächliche Breite und Höhe ist größer als die eingestellten Werte.

2. Elemente auf Blockebene und Inline-Elemente

Wenn wir das

Seitenlayout erstellen, verwenden wir normalerweise HTML Elemente werden in zwei Typen unterteilt, nämlich Elemente auf Blockebene und Inline-Elemente.

Elemente auf Blockebene: Elemente auf Blockebene schließen andere Elemente aus, die sich in derselben Zeile wie sie befinden. Sie können die Breite und Höhe der Elemente festlegen, die im Allgemeinen Container für andere Elemente sind kann Elemente auf Blockebene und Inline-Elemente aufnehmen. Zu den gängigen Elementen auf Blockebene gehören div, p, h1~h6 usw.

Inline-Elemente: Inline-Elemente können keine Breite und Höhe haben, aber sie können sich in derselben Zeile befinden wie andere Inline-Elemente, die im Allgemeinen keine Elemente auf Blockebene enthalten können. Die Höhe eines Inline-Elements wird im Allgemeinen durch die Schriftgröße innerhalb des Elements bestimmt, und die Breite wird durch die Länge des Inhalts gesteuert. Zu den gängigen Inline-Elementen gehören a, em, strong usw.

Zum Beispiel: Wir können den folgenden Stil auf div oder p anwenden, aber der folgende Stil kann nicht auf das a-Tag angewendet werden.

Natürlich können wir den Anzeigemodus des Elements auch über das Stil-AnzeigeAttribut ändern. Wenn der Anzeigewert auf Block gesetzt ist, wird das Element auf Blockebene gerendert; wenn der Anzeigewert auf Inline gesetzt ist, wird das Element inline gerendert. Wir können also den folgenden Stil auf das a-Tag anwenden:

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung des CSS-Box-Modells sowie von Block- und Inline-Elementen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!