Was sind die CSS-Layoutmethoden?

CSS-Layoutmethoden umfassen: 1. Statisches Layout (Float-Layout und absolutes Layout); 2. Adaptives Layout (linke feste + rechte adaptive, linke und rechte feste Breite + mittlere adaptive, Holy Grail-Layout, doppeltes Fliegen); Flügellayout); 4. Responsives Layout; 5. Flexibles Layout.

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

Wir haben uns von CSS zu den aktuellen Hauptkategorien entwickelt, die in den folgenden Kategorien zusammengefasst werden können. Die Ihnen bekannten Implementierungsmethoden können die spezifischen Implementierungen auf folgende Weise sein:

• Statisches Layout
• Adaptives Layout
• Fließendes Layout (auch bekannt als Prozentlayout%)
• Responsives Layout: Medienabfrage
• Flexibles Layout (rem/em-Flex-Layout)

1. Statisches Layout

Am meisten Bei der herkömmlichen Layoutmethode werden alle Größen auf der Webseite in px angegeben und die Mindestbreite wird festgelegt. Wenn die Breite kleiner als diese Breite ist, wird eine Bildlaufleiste angezeigt zentriert werden und der Hintergrund hinzugefügt wird.

Implementierungsmethode:

PC: Zentriertes Layout, absolute Breite/Höhe (px) für alle Stile verwenden, ein Layout entwerfen, horizontale und vertikale Bildlaufleisten verwenden, um den verdeckten Teil anzuzeigen, wenn die Bildschirmbreite und -höhe angepasst werden;

Mobile Geräte:Erstellen Sie außerdem eine mobile Website, entwerfen Sie ein separates Layout und verwenden Sie unterschiedliche Domainnamen wie wap oder m.

Vorteile: Bei Verwendung der vorherigen CSS2-Layoutmethode ist das Layout einfach und es gibt keine Kompatibilitätsprobleme.

Nachteile: Es kann nicht vernünftig auf dem Mobiltelefon angezeigt werden. Die PC-Seite kann nicht auf dem Mobiltelefon verwendet werden. Sie müssen ein anderes Layout schreiben.

Übungsfall:

• Float-Layout
• Absolutes Layout

2. Adaptives Layout

kann als aus mehreren statischen Layouts unter verschiedenen Bildschirmen bestehend angesehen werden. Adaptives Layout definiert unterschiedliche Layouts für unterschiedliche Bildschirmauflösungen. Durch Ändern der Bildschirmauflösung kann zwischen verschiedenen statischen Layouts gewechselt werden (die Position von Seitenelementen kann sich ändern), aber in jedem statischen Layout ändern sich die Seitenelemente nicht, wenn die Fenstergröße angepasst wird. Adaptives LayoutDie Position der Elemente auf der Seite ändert sich, wodurch der Nachteil der geringen Ausnutzung großer Bildschirmfläche im fließenden Layout effektiv behoben wird.

Wenn sich die Bildschirmauflösung ändert, ändert sich die Position der Elemente auf der Seite, nicht jedoch die Größe.

Praktischer Fall: Baidu-Such-Homepage

(Lernvideo-Sharing: CSS-Video-Tutorial)

3. Flüssiges Layout

Verwenden Sie Prozentsätze für die Größe der unterteilten Hauptbereiche auf der Webseite

(mit min -*, das Attribut max-* wird verwendet, um das Layoutformat für verschiedene Bildschirme festzulegen. Wenn sich die Bildschirmgröße ändert, werden unterschiedliche Layouts angezeigt, was bedeutet, dass sich der Elementblock auf diesem Bildschirm an dieser Stelle befindet, aber auf diesem Bildschirm , der Elementblock wird an dieser Stelle wieder angezeigt. Lediglich das Layout ändert sich, die Elemente bleiben unverändert. Es besteht aus mehreren statischen Layouts auf verschiedenen Bildschirmen.

Das Merkmal des Fluid-Layouts besteht darin, dass sich das Layout der Seite nicht wesentlich ändert und angepasst und angepasst werden kann. Dies ergänzt lediglich das adaptive Layout. Verwenden Sie %-Prozentsätze, um die Breite zu definieren, und die Höhe ist größtenteils in px festgelegt. Sie kann entsprechend der Echtzeitgröße des visuellen Bereichs (Ansichtsfenster) und des übergeordneten Elements angepasst werden, um sie so weit wie möglich an verschiedene Auflösungen anzupassen . Eigenschaften wie max-width/min-width werden häufig verwendet, um den Größenflussbereich zu steuern, um zu vermeiden, dass er zu groß oder zu klein ist und die Lesbarkeit beeinträchtigt. Diese Layoutmethode wurde in der frühen Geschichte der Web-Frontend-Entwicklung verwendet, um PC-Bildschirme unterschiedlicher Größe zu bewältigen (der Unterschied in der Bildschirmgröße war damals nicht allzu groß). Es ist auch heute eine häufig verwendete Layoutmethode mobile Entwicklung, aber Offensichtliche Nachteile: Das Hauptproblem besteht darin, dass bei einer zu großen Bildschirmgröße die Anzeige auf einem Bildschirm, der im Vergleich zum ursprünglichen Design zu klein oder zu groß ist, nicht richtig angezeigt wird. Da die Breite in % definiert wird, die Höhe und die Textgröße jedoch größtenteils in px festgelegt sind, besteht der Anzeigeeffekt auf einem Mobiltelefon mit großem Bildschirm darin, dass die Breite einiger Seitenelemente sehr lang gestreckt wird, die Höhe und die Textgröße jedoch nicht sind immer noch die gleichen wie die Originale (das heißt, diese Dinge können nicht „fließend“ werden

Wenn sich die Bildschirmauflösung ändert, ändert sich die Größe der Elemente auf der Seite, aber das Layout ändert sich nicht.

Main Übungsfälle:

• Fest links + rechts Adaptiv

• Feste Breite links und rechts + adaptiv in der Mitte

• Holy Grail-Layout

• Doppeltes Nurflügler-Layout

4. Responsives Layout

Durch Responsive Design kann die Website auf Mobiltelefonen und Tablets besser durchsucht und gelesen werden. Unterschiedliche Bildschirmgrößen führen dazu, dass den Benutzern unterschiedliche Webseiteninhalte angezeigt werden. Mit der Medienabfrage können Sie die Größe des Bildschirms erkennen (hauptsächlich die Breite) und unterschiedliche CSS-Stile festlegen, um ein reaktionsfähiges Layout zu erreichen. Verlässt sich hauptsächlich auf CSS-Medienabfragen.

Für jede Bildschirmauflösung gibt es einen Layoutstil, d. h. die Position und Größe der Elemente ändert sich.

Praktische Case-Medienabfrage

5. Flexibles Layout

• rem/em
• Flex-Layout

Weitere Programmierkenntnisse finden Sie unter: Programmiervideo! !

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