Erste Schritte mit dem CSS-Layout

Elemente und Boxen

Das in HTML häufig verwendete Konzept ist das Element, aber in CSS ist die Grundeinheit des Layouts die Box, die immer rechteckig ist. Es gibt keine Eins-zu-eins-Entsprechung zwischen

-Elementen und Boxen. Pseudoelemente in CSS-Regeln können auch keine Boxen generieren.

Zusätzlich zu Elementen können Textknoten in HTML auch Boxen generieren.

Box-Modell

Eine Box enthält Inhalt, Rahmen, Innenraum, Rand (Rand). Die folgende Abbildung zeigt die intuitive Bedeutung des Box-Modells:

Die Definition der Boxgröße (Breite und Höhe) wird durch das Box-Sizing-Attribut beeinflusst. Für die Boxgröße stehen drei Modi zur Auswahl: Content-Box (Standard), Padding-Box und Border-Box.

Normaler Fluss

Normaler Fluss ist eine Seite, auf der die meisten Felder im normalen Fluss angeordnet sind. Boxen im normalen Stream müssen sich in einem bestimmten Formatierungskontext befinden. Im normalen Stream gibt es zwei Formatierungskontexte: Blockformatierungskontext (BFC) und Inline-Formatierungskontext (IFC).

Im Formatierungskontext auf Blockebene sind die Felder vertikal angeordnet, und im Inline-Formatierungskontext sind die Felder horizontal angeordnet.

Der normale Flow-Root-Container ist ein Formatierungskontext auf Blockebene. Verschiedene Boxen können intern einen Inline-Formatierungskontext oder einen Formatierungskontext auf Blockebene generieren.

Blockebene und Inline-Ebene

Boxen im normalen Ablauf sind in Blockebene und Inline-Ebene unterteilt. Wenn es ein

HTML-Element gibt, das eine Inline-Box generiert und dessen Kontext Blockebene ist, sollte dafür eine anonyme Blockebene-Box generiert werden. Das Anzeigeattribut des

-Elements bestimmt, ob sich die Box auf Inline- oder Blockebene befindet:

• Block, Table, Flex, Grid, List-Item ist Blockebene

• Inline, Inline-Block, Inline-Table, Inline-Flex, Inline-Grid sind Inline-Level

Formatierungskontext

Anzeige kann auch bestimmen, wie innerhalb des Elements angezeigt wird. Die von einigen Containerelementen generierten Felder erzeugen andere Formatierungskontexte als BFC und IFC.

Es gibt eine Klasse von Boxen, sogenannte Blockcontainer, die Boxen auf Blockebene enthalten können. Ein Blockcontainer erstellt entweder einen Formatierungskontext auf Blockebene, sodass er nur Boxen auf Blockebene enthält, oder er erstellt einen Formatierungskontext auf Inline-Ebene, sodass er nur Elemente auf Inline-Ebene enthält. (Das heißt, ein Blockcontainer kann nicht sowohl Boxen auf Blockebene als auch Boxen auf Inline-Ebene enthalten. Sobald sich in seiner Unterbox Boxen auf Blockebene befinden, werden alle Boxen auf Inline-Ebene automatisch von Anonym umschlossen Kartons).

Blockcontainer in Formatierungskontexten ohne Blockebene erstellen immer neue Formatierungskontexte auf Blockebene: Anzeigefelder für Inline-Blöcke, Tabellenzellen und Tabellenüberschriften. Ein Blockcontainer, der sich auch in einem Formatierungskontext auf Blockebene befindet, erstellt nur dann einen neuen Formatierungskontext auf Blockebene, wenn

Überlauf nicht sichtbar ist.

Absolut positionierte und schwebende Blockcontainer erstellen immer einen neuen Formatierungskontext auf Blockebene.

Elemente, deren Anzeigewert table oder inline-table ist, generieren eine Tabelle, und innerhalb der Tabelle wird eine spezielle Formatierungsmethode verwendet, um ihre internen Elemente anzuordnen.

Elemente, deren Anzeigewert „Grid“ oder „Inline-Grid“ ist, erzeugen Rasterelemente. Ähnlich wie in der Tabellensituation wird auch intern eine spezielle Formatierungsmethode verwendet, um ihre internen Elemente zu kennzeichnen,

Elemente mit a Der Anzeigewert „Flex“ oder „Inline-Flex“ generiert einen adaptiven Container (Flex-Container) und der adaptive Container generiert darin einen adaptiven Formatierungskontext (Flex-Formatierungskontext).

Das obige ist der detaillierte Inhalt vonErste Schritte mit dem CSS-Layout. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!