Was sind die gängigen Layouts in CSS?

Übliche Layouts in CSS sind: 1. Horizontale Zentrierung, Inline-Elemente sind horizontal zentriert, Elemente auf Blockebene sind horizontal zentriert und Elemente auf Multiblockebene sind horizontal zentriert; 2. Vertikale Zentrierung, einzeilige Inline-Elemente sind vertikal zentriert und mehrzeilige Elemente sind vertikal zentriert. 4. Einspaltiges Layout.

Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.

1. Horizontale Zentrierung:

Horizontale Zentrierung von Inline-Elementen

Verwenden Sie text-align: center, um eine horizontale Zentrierung von Inline-Elementen innerhalb von Elementen auf Blockebene zu erreichen. Diese Methode eignet sich für die horizontale Zentrierung von Inline-Elementen (Inline), Inline-Blöcken (Inline-Block), Inline-Tabellen (Inline-Table) und Inline-Flex-Elementen.

Kerncode:

.center-text {
  text-align: center;
}

Elemente auf Blockebene werden horizontal zentriert

Indem Sie den linken und rechten Rand von Elementen auf Blockebene mit fester Breite auf „Auto“ setzen, können Sie die Elemente auf Blockebene horizontal zentrieren.

Kerncode:

.center-block {
  margin: 0 auto;
}

Mehrere Elemente auf Blockebene werden horizontal zentriert

Inline-Block verwenden

Wenn zwei oder mehr Elemente auf Blockebene in einer Reihe vorhanden sind, stellen Sie den Anzeigetyp der Elemente auf Blockebene auf „Inline“ ein -block und Das text-align-Attribut des übergeordneten Containers zentriert dadurch Elemente auf mehreren Blockebenen horizontal.

Kerncode:

.container {
    text-align: center;
}
.inline-block {
    display: inline-block;
}

2. Vertikale Zentrierung

Einzeilige Inline-(Inline-)Elemente werden vertikal zentriert

Durch Festlegen der Höhe (height) und line-height (line-height) des Inline-Elements gleich sein, sodass das Element vertikal zentriert ist.

Kerncode:

#v-box {
    height: 120px;
    line-height: 120px;
}

Mehrzeilige Elemente werden vertikal zentriert.

Verwenden des Tabellenlayouts (Tabelle)

Verwenden des Tabellenlayouts „vertikal-align: middle“, um eine vertikale Zentrierung untergeordneter Elemente zu erreichen.

Kerncode:

.center-table {
    display: table;
}
.v-cell {
    display: table-cell;
    vertical-align: middle;
}

3. Verwenden Sie das Flex-Layout (Flex)

Verwenden Sie das Flex-Layout, um eine vertikale Zentrierung zu erreichen, wobei Flex-Richtung: Spalte die Hauptachsenrichtung als vertikal definiert. Da das Flex-Layout in CSS3 definiert ist, gibt es Kompatibilitätsprobleme in älteren Browsern.

Kerncode:

.center-flex {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

4. Einspaltiges Layout

Es gibt zwei Haupttypen:

- Kopfzeile, Inhalt und Fußzeile haben die gleiche Breite, und es gibt eine maximale Breite

- Kopf- und Fußzeile Nehmen Sie 100 % der Breite des Browsers ein. Der Inhalt hat eine maximale Breite.

Erster Typ:

<header style="background-color: red; width: 600px; margin: 0 auto;">头部</header>
<main style="background-color: green; width: 600px; margin: 0 auto;">内容</main>
<footer style="background-color: yellow; width: 600px; margin: 0 auto;">尾部</footer>

und den Hauptinhalt in einer Zeile zusammenfassen und dann den Hauptinhalt festlegen. Der Rand des Inhalts.

<header style="background-color: red;">头部</header>
<main style="background-color: green; width: 600px; margin: 0 auto;">内容</main>
<footer style="background-color: yellow;">尾部</footer>

Empfohlenes Lernen:

CSS-Video-Tutorial

Das obige ist der detaillierte Inhalt vonWas sind die gängigen Layouts in CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!