Beispiel für ein Web-Frontend-Tutorial für ein CSS-Layout

CSS-Layout

Layout ist ein wichtiger Teil von CSS Wir hoffen, dies mit häufig verwendeten Techniken des Layouts, einschließlich häufig verwendeter horizontaler und vertikaler Zentrierungsmethoden, sowie verschiedenen Implementierungsmethoden für einspaltiges Layout und mehrspaltiges Layout (einschließlich traditionellem Box-Modell-Layout und relativ neuer Flex-Layout-Implementierung) zu erreichen Freunde, die etwas Hilfe brauchen.

Inhaltsverzeichnis

1. Häufig verwendete Zentrierungsmethoden: horizontale Zentrierung, vertikale Zentrierung,

2. Spalten- und Drei-Spalten-Layout: Float+Margin, Position+Margin, Holy Grail-Layout (Float+negativer Rand), Double Flying Wing-Layout (Float+negativer Rand), Flex-Layout

Wenn Sie lernen möchten und Kommunizieren Sie mit Web-Frontend-Technologien wie HTML5CSS3 und möchten Sie mehr über Frontend-Aspekte erfahren. Für Inhalte können Sie unserer QQ-Lerngruppe beitreten: 27062964, um gemeinsam zu lernen und zu kommunizieren, sich zu verbessern und Lernmaterialien und Quellcode auszutauschen. Oder klicken Sie auf den Link, um direkt der QQ-Gruppe beizutreten:

Zusammenfassung

1. Häufig verwendete Zentriermethoden

Zentrierung in Layouts sehr häufig vorkommt, gehen wir davon aus, dass die DOM-Dokumentstruktur wie folgt ist und die untergeordneten Elemente im übergeordneten Element zentriert sein sollten:

Horizontal zentriert

Ob das untergeordnete Element ein Inline-Element oder ein Blockelement ist, die Breite sicher oder unbestimmt ist, das verwendete Layoutschema ist unterschiedlich. Analyse unten:

Inline-Elemente: setze text-align:center auf das übergeordnete Element;

Blockelemente mit fester Breite: setze die linken und rechten Randwerte auf auto;

Blockelement mit variabler Breite: Stellen Sie das untergeordnete Element auf display:inline ein und legen Sie dann text-align:center; fest.

Allgemeine Lösung für das übergeordnete Element: Flex-Layout, legen Sie display:flex;justify-content fest :center; auf dem übergeordneten Element;

Vertikale Zentrierung

Für die vertikale Zentrierung gibt es unterschiedliche Lösungen für einzeiligen Inline-Text und Blockelemente.

Das übergeordnete Element ist sicher, und das untergeordnete Element ist eine einzelne Zeile Inline-Text: Stellen Sie die Höhe des übergeordneten Elements auf die Zeilenhöhe ein. line-height

Das übergeordnete Element ist sicher , und das untergeordnete Element ist mehrzeiliger Inline-Text: Legen Sie das übergeordnete Element display:table-cell oder inline-block fest und legen Sie dann Vertical-align:middle;

Blockelement fest: Legen Sie die Position des untergeordneten Elements fest: fest (absolut) und dann margin:auto;

Allgemeine Lösung: Flex-Layout, setze {display:flex align-items:center;} auf das übergeordnete Element.

2. Einspaltiges Layout

Merkmale: feste Breite, horizontale Zentrierung

Einer besteht darin, dass die Kopf-, Inhalts- und Fußzeilenbreite alle gleich sind, was im Allgemeinen nicht die maximale Breite des Browsers einnimmt, sondern wenn die Browserbreite unter ihr Maximum reduziert wird Breite, die Breite wird angepasst.

Einer ist, dass die Breite der Kopf- und Fußzeile der Browserbreite entspricht, der Inhalt und der Inhalt der Kopf- und Fußzeile jedoch nicht die Browserbreite ausfüllen.

Stellen Sie für den ersten Typ die Breite oder maximale Breite einheitlich für Kopfzeile, Inhalt und Fußzeile ein und verwenden Sie margin:auto, um eine Zentrierung zu erreichen.

DOM-Dokument:

DOM-Dokument:

3. Zweispaltiges und dreispaltiges Layout

Der Grund, warum zweispaltiges Layout und dreispaltiges Layout zusammen geschrieben werden, liegt darin, dass das zweispaltige Layout als dreispaltiges Layout ohne eine Seitenleiste betrachtet werden kann und die Layoutideen ähnlich sind. Für die traditionelle Implementierungsmethode besprechen wir hauptsächlich die ersten drei Layouts im obigen Bild, das klassische zweispaltige Layout mit Seitenspalten und das dreispaltige Layout mit linken und rechten Seitenspalten. Für das Flex-Layout sind die fünf Layouts im Das obige Bild ist implementiert.

a. float+margin

Prinzipbeschreibung: Stellen Sie die beiden Seitenspalten so ein, dass sie nach links und rechts schweben, und die mittlere Spalte verwendet den Rand, um Platz für die beiden Seitenspalten zu schaffen der mittleren Spalte An das Browserfenster anpassen.

DOM-Dokument:

Layout-Schritte:

Legen Sie die Breite beider Seitenspalten fest, fügen Sie der linken Spalte eine linke Gleitkommazahl und der rechten Spalte eine Gleitkommazahl hinzu.

Legen Sie den linken und rechten Rand für das Hauptfenster fest. Der Wert von margin-left ist die Breite der linken Spalte und der Wert von margin-right ist die Breite der rechten Spalte.

CSS-Liste:

Einige Anweisungen:

* Achten Sie auf die Schreibreihenfolge des DOM-Dokuments Schreiben Sie zuerst zwei. Schreiben Sie für die Seitenspalte das Hauptfeld. Nach dem Ersetzen wird die Seitenspalte in die nächste Spalte gequetscht (wird sowohl im Holy Grail-Layout als auch im Double Flying Wing-Layout verwendet). * Diese Layoutmethode ist relativ einfach und übersichtlich, der Nachteil besteht jedoch darin, dass zuerst die Seitenleiste und nicht das wichtigere Hauptfenster gerendert wird.

So implementieren Sie zwei Spalten

Wenn es sich um ein zweispaltiges Layout mit einer Seitenleiste auf der linken Seite handelt, entfernen Sie die rechte Spalte und legen Sie nicht den Wert für den rechten Rand des Hauptbereichs fest. Die anderen Vorgänge sind gleich. umgekehrt.

b. Position+Rand

Prinzipbeschreibung: Fixieren Sie die beiden Seitenspalten durch absolute Positionierung, schaffen Sie auch Platz für die beiden Seitenspalten durch Ränder, und die mittlere Spalte ist adaptiv.

DOM-Dokument:

Layoutschritte:

Legen Sie die Breite der Seitenleisten auf beiden Seiten fest und legen Sie fest die Positionierungsmethode für die absolute Positionierung.

Setzen Sie den oberen Wert beider Seiten der Spalte auf 0, den linken Wert der linken Spalte auf 0 und den rechten Wert der rechten Spalte auf 0.

Legen Sie den linken und rechten Rand für das Hauptfenster fest. Der Wert von margin-left ist die Breite der linken Spalte und der Wert von margin-right ist die Breite der rechten Spalte.

CSS-Liste:

Einige Hinweise:

Im Vergleich zur vorherigen Methode ist diese Methode Die Position von Die Seitenleiste wird durch Positionierung fixiert.

Wenn die mittlere Spalte eine Mindestbreitenbeschränkung oder ein internes Element mit Breite hat und das Browserfenster klein genug ist, überlappen sich das Hauptfenster und die Seitenspalte.

So implementieren Sie zwei Spalten

Wenn es sich um ein zweispaltiges Layout mit einer Seitenleiste auf der linken Seite handelt, entfernen Sie die rechte Spalte und legen Sie nicht den Wert für den rechten Rand des Hauptbereichs fest. Die anderen Vorgänge sind gleich. umgekehrt.

c. Holy Grail-Layout (Float + negativer Rand + Polsterung + Position)

Prinzipbeschreibung:

Setzen Sie die Breite des Hauptpanels auf 100 %, das Hauptpanel und die beiden Seitenspalten sind alle auf schwebend eingestellt und werden normalerweise schwebend gelassen. Zu diesem Zeitpunkt werden die beiden Seitenleisten durch das Hauptfenster herausgedrückt. Ziehen Sie die schwebende Seitenleiste durch negative Ränder nach oben. Der negative Rand der linken Spalte beträgt 100 %, was genau der Breite des Fensters entspricht. Daher verläuft er von der linken Seite unter dem Hauptfenster bis zur linken Seite, die am Hauptfenster ausgerichtet ist Die Spalte auf der rechten Seite befindet sich hier, wenn sie nach links unterhalb des Hauptbereichs verschoben wird. Stellen Sie den negativen Rand auf „negativ“ und die eigene Breite schwebt einfach rechts von der Ausrichtung des Hauptbereichs. Um zu verhindern, dass die Seitenleiste den Inhalt des Hauptfensters blockiert, stellen Sie die linken und rechten Auffüllwerte in der äußeren Ebene auf die Breite der linken und rechten Seitenleisten ein, um Platz für die Seitenleisten zu schaffen des Hauptpanels wird reduziert. Da die negativen Ränder der Seitenleisten relativ zum Hauptpanel sind, werden die beiden Seitenleisten nicht wie gewünscht an der linken und rechten Seite angedockt, sondern zusammen mit dem verkleinerten Hauptpanel näher an die Mitte gerückt. Verwenden Sie zu diesem Zeitpunkt das relative Layout und passen Sie die beiden Seitenleisten an die entsprechenden Positionen an.

DOM-Dokument:

Layoutschritte :

Alle drei sind so eingestellt, dass sie nach links schweben.

Stellen Sie die Hauptbreite auf 100 % und die Breite der beiden Seitenspalten ein.

Negativen Rand festlegen, Unterteil setzt negativen linken Rand auf 100 %, Extra setzt negativen linken Rand auf negative eigene Breite.

Stellen Sie den Füllwert von main so ein, dass Platz für die linken und rechten Unterfelder bleibt.

Stellen Sie die beiden Unterfelder auf relative Positionierung ein, der linke Wert von „sub“ ist die negative Unterbreite und der rechte Wert von „extra“ ist die negative zusätzliche Breite.

CSS-Liste:

Einige Hinweise

Die Schreibreihenfolge von DOM-Elementen darf nicht geändert werden.

Wenn der Hauptinhaltsteil des Panels kleiner ist als die Breite der Unterpanels auf beiden Seiten, wird das Layout durcheinander gebracht. Sie können Probleme vermeiden, indem Sie das Attribut „min-width“ von main festlegen oder ein Doppelflügel-Layout verwenden.

So implementieren Sie zwei Spalten

Wenn es sich um ein zweispaltiges Layout mit einer Seitenleiste auf der linken Seite handelt, entfernen Sie die rechte Spalte und legen Sie den Padding-Right-Wert des Hauptbereichs nicht fest. Die anderen Vorgänge sind gleich. umgekehrt.

d. Doppelflügel-Layout (Float + negativer Rand + Rand)

Prinzipbeschreibung:

Die Ideen des Doppelflügel-Layouts und des Holy Grail-Layouts sind etwas ähnlich. Beide verwenden Float- und Negativränder, aber das Double-Flying-Wing-Layout hat sich gegenüber dem Holy Grail-Layout verbessert. Es fügt eine Div-Ebene auf dem Hauptelement hinzu und legt den Rand fest, da die negativen Ränder auf beiden Seiten der Spalten relativ zum Hauptelement sind -wrap, die wichtigsten Änderungen am Randwert wirken sich nicht auf die beiden Seitenspalten aus, sodass der Schritt zum Festlegen des relativen Layouts der beiden Seitenspalten weggelassen wird.

DOM-Dokument:

Layout-Schritte:

Alle drei sind so eingestellt, dass sie nach links schweben.

Setzen Sie die Breite des Hauptumbruchs auf 100 % und legen Sie die Breite der beiden Seitenleisten fest.

Negativen Rand festlegen, Unterteil setzt negativen linken Rand auf 100 %, Extra setzt negativen linken Rand auf negative eigene Breite.

Stellen Sie den Randwert von main so ein, dass Platz für die linken und rechten Unterfelder bleibt.

CSS-Liste:

Einige Erklärungen

Der Heilige Gral verwendet Polsterung, während die doppelten fliegenden Flügel verwenden margin , wodurch das Manko behoben wird, dass die Mindestbreite der Hauptspalte des Holy Grail-Layouts nicht kleiner sein darf als die der linken Spalte.

Bei der Anordnung der doppelten Nurflügler müssen keine relative Anordnung und entsprechende Werte für links und rechts festgelegt werden.

Durch die Einführung eines relativen Layouts können verschiedene Kombinationen von dreispaltigen Layouts realisiert werden. Beispielsweise kann die Einstellung „position: relative left: 190px“ und „sub+extra+main“ erreicht werden.

So implementieren Sie zwei Spalten

Wenn es sich um ein zweispaltiges Layout mit einer Seitenleiste auf der linken Seite handelt, entfernen Sie die rechte Spalte und legen Sie nicht den margin-right-Wert von main-wrap fest. Die anderen Vorgänge sind gleich. umgekehrt.

Das Folgende ist der Flex-Layout-Code für die fünf Layouts:

DOM-Dokument:

CSS-Liste

Im Vergleich zu mehreren zuvor erwähnten herkömmlichen Layoutschemata ist der Flex-Layout-Code äußerst prägnant und sehr vielseitig und verwendet einfache drei Zeilen CSS. Das heißt, Fünf gängige Layouts sind implementiert.

Zusammenfassung

Die traditionelle Layoutmethode basiert auf dem Box-Modell und basiert auf der Logik des Anzeigeattributs + Positionsattributs + Float ist relativ komplex und für die Implementierung sind einige Spezialeffekte, wie z. B. die vertikale Zentrierung, besonders komplex und umständlich. Der Flex-Container im Flex-Layout kann das Seitenverhältnis und die Reihenfolge der Unterelemente entsprechend dem tatsächlich verfügbaren Platz dynamisch anpassen, sodass die Elemente den verfügbaren Platz so gut wie möglich nutzen können, gleichzeitig aber auch verkleinert werden, um eine Überschreitung zu vermeiden. Flex-Layout bietet eine einfache, vollständige und reaktionsfähige Layoutlösung.