Was sind die CSS-Layoutmethoden? Zusammenfassung der CSS-Layoutmethoden

Das CSS-Seitenlayout ist bei Webseiten sehr nützlich. Das CSS-Seitenlayout kann die Position von Webseiten relativ zum normalen Layoutfluss, umgebenden Elementen, übergeordneten Containern oder Hauptansichtsfenstern/-fenstern steuern. Schauen wir uns die CSS-Seitenlayoutmethode genauer an.

CSS zum Implementieren des linken und rechten Layouts

Es gibt etwa sechs Möglichkeiten, das linke und rechte Layout mit CSS zu implementieren:

1. Die li-Implementierung des Tabellen-Tags

kann das linke und rechte Layout realisieren, und td repräsentiert eine Spalte, die zu tr hinzugefügt werden kann das linke und rechte Layout der Box.

2. inline-block

display:inline-block-Attribut ist ein Attribut zwischen Elementen auf Zeilenebene (display:inline ) und Elemente auf Blockebene (display:block). Elemente auf Zeilenebene können horizontal angeordnet werden, und Breiten- und Höhenattribute können wie Elemente auf Blockebene festgelegt werden, sodass sie links und rechts angeordnet werden können.

3. Float implementiert das linke und rechte Layout

Float Floats, wodurch der Blockbereich vom Dokumentfluss des übergeordneten Tags getrennt wird Bewegen Sie sich in Richtung des übergeordneten Etiketts. Der rechte Attributwert bewirkt, dass der Bereichsblock an der rechten Grenze des übergeordneten Etiketts platziert wird .

Das Float-Layout verwendet ein gestaffeltes Layout für das Layout nachfolgender Knoten, und der Inline-Block verwendet ein normales Layout.

4. Das Flexbox-Attribut implementiert das linke und rechte Layout

flexbox flexibles Box-Layout, display:box; Dieses Layout wird hauptsächlich für die mobile Front-End-Entwicklung verwendet.

5. Float+margin implementiert das linke und rechte Layout

float kann Elemente nach links oder rechts anordnen, wenn ein normaler Flussbereich auf derselben Ebene festgelegt ist Wenn das Element dem schwebenden Block gegenübersteht, befindet sich der schwebende Block an der Grenze des Geschwisterbereichs mit normalem Fluss, aber der schwebende Block beeinflusst das Layout des Bereichsblocks, sodass der Einfluss des schwebenden Blocks zu diesem Zeitpunkt gelöscht werden muss , die Box außerhalb des normalen Flussbereichsblocks. Wenn Sie den Rand gleich der Breite des Schwimmers festlegen, kann der Effekt behoben werden.

6. Position: absolutes linkes und rechtes Layout

Absolute Positionierung erzeugt ein Layoutphänomen, das außerhalb des Dokumentenflusses liegt. Absolut kann Elemente an jeder Position abdecken und hat keinen Einfluss auf das Layout des normalen Flusses, verursacht jedoch Schatten.

CSS-Layout links, in der Mitte und rechts

Dreispaltiges adaptives Layout: feste Breite auf beiden Seiten und adaptive Breite des mittleren Blocks .

1. Absolute Positionierungsmethode

Da die absolute Positionierung außerhalb des Dokumentflusses liegt, fließt sie natürlich in die Mitte es, und verwenden Sie dann das Randattribut, wobei die Breite des linken und rechten Elements so belassen wird, dass sich das mittlere Element an die Bildschirmbreite anpassen kann.

2. Verwenden Sie die Self-Floating-Methode

Verwenden Sie float:left und float:right für links bzw. rechts Dokumentfluss, und das mittlere Element ist normal. Verwenden Sie im normalen Dokumentfluss den Rand, um den linken und rechten Rand für die Positionierung anzugeben. Gleichzeitig setzt die übergeordnete Box den Überlauf: auto; um zu verhindern, dass die untergeordnete Box überläuft

3. Das Prinzip des Holy Grail-Layouts ist die Methode der negativen Marge. Um das Holy Grail-Layout zu verwenden, müssen Sie zunächst ein p außerhalb des Mittelelements einfügen. Um ein p einzuschließen, müssen Sie das Float-Attribut festlegen, um ein BFC zu bilden, und die Breite festlegen. Diese Breite muss mit dem negativen Wert des Rands von übereinstimmen der linke Block.

CSS-zentriertes Layout

Horizontale Zentrierung

Für Inline-Elemente (Inline): Text- align: center;

Für Elemente auf Blockebene (Block): Stellen Sie die Breite und den linken und rechten Rand auf „Auto“ ein und verwenden Sie „max-width“ anstelle von „width“.

Für mehrere Elemente auf Blockebene: setze text-align: center; für das übergeordnete Element und setze display: inline-block; (vertical-alinga:top) für das untergeordnete Element; 🎜>

Flex-Layout: display:flex; justify-content:center

Vertikale Mitte

Für Inline-Elemente (Inline)Einzeln Zeile: Gleiche Polsterung oben und unten einstellen (oder Zeilenhöhe und Höhe gleich einstellen)

Mehrere Zeilen: Obere und untere Polsterung gleich einstellen oder Anzeige einstellen: Tabellenzelle; align: middle;; oder verwenden Sie das Flex-Layout; oder verwenden Sie das Pseudo-Element

Für Elemente auf Blockebene (Block): (Für die ersten beiden Lösungen unten muss das übergeordnete Element das relative Layout verwenden)

Bekannte Höhe: Untergeordnete Elemente verwenden das absolute Layout oben: 50 %; Verwenden Sie dann den negativen Rand oben, um das untergeordnete Element um die halbe Höhe nach oben zu ziehen

Unbekannte Höhe: Das untergeordnete Element verwendet die absolute Layoutposition: absolut ; top: 50 %; transform: translatorY(-50 %);

Verwenden Sie Flexbox: Wählen Sie die Richtung aus, justify-content: center;

css, um eine horizontale und vertikale Zentrierung zu erreichen Layout

Feste Höhe und Breite: Verwenden Sie zuerst das absolute Layout oben: 50 %; links: 50 %; und verwenden Sie dann einen negativen Rand, der der Hälfte der Breite und Höhe entspricht, um die untergeordneten Elemente zurückzuziehen Die Höhe und Breite sind unbekannt: Verwenden Sie zuerst das absolute Layout. Oben: 50 %; : justify-content: center; align-items: center.

box-sizing

Wenn Sie ein Element auf box-sizing: border-box; einstellen, erhöhen die Polsterung und der Rand dieses Elements seine Breite nicht mehr.

Prozentbreite

Prozentsatz ist eine Maßeinheit relativ zum enthaltenden Block. Dies ist nützlich für Bilder und Box-Module: Beispielsweise beträgt die Bildbreite immer 50 % der Containerbreite, auch wenn das Fenster verkleinert wird.

CSS implementiert Inline-Block-Layout

Inline-Block-Element beeinflusst die vertikale Zentrierung, fügen Sie Vertical-Align: Top hinzu.

Empfohlene verwandte Artikel:

CSS-Layout Holy Grail Layout & Double Flying Wing Layout_html/css_WEB-ITnose

Layoutmodell des CSS-Layouts

Was sind die Fähigkeiten des CSS-Layouts

Das obige ist der detaillierte Inhalt vonWas sind die CSS-Layoutmethoden? Zusammenfassung der CSS-Layoutmethoden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!