1. Drei Möglichkeiten des traditionellen Webseitenlayouts
Die Essenz des Webseitenlayouts: Verwenden Sie CSS, um Boxen zu platzieren und die Boxen an den entsprechenden Positionen zu platzieren.
CSS bietet drei traditionelle Layoutmethoden (einfach ausgedrückt, wie Boxen angeordnet sind).
(1) Gewöhnlicher Stream (Standard-Stream)
(2) Schwebend
(3) Positionierung
Dies bezieht sich nur auf das traditionelle Layout. Tatsächlich gibt es einige spezielle und erweiterte Layoutmethoden.
2. Standard-Stream (normaler Stream/Dokument-Stream)
Der sogenannte Standardfluss: Tags werden in einer vorgeschriebenen Standardweise angeordnet.
(1) Elemente auf Blockebene belegen eine exklusive Zeile und werden in der Reihenfolge von oben nach unten angeordnet.
(2) Inline-Elemente werden in der Reihenfolge von links nach rechts angeordnet und automatisch umbrochen, wenn sie den Rand des übergeordneten Elements erreichen.
Die oben genannten sind alles Standard-Flow-Layouts. Was wir zuvor untersucht haben, ist der Standard-Flow.
Diese drei Layoutmethoden werden alle zum Platzieren von Boxen verwendet. Wenn die Boxen an der richtigen Position platziert werden, ist das Layout natürlich abgeschlossen.
Hinweis: In der tatsächlichen Entwicklung enthält eine Seite grundsätzlich diese drei Layoutmethoden (das mobile Endgerät lernt später neue Layoutmethoden).
3. Warum ist Floating nötig?
Frage: Können wir mit Standard-Streams problemlos die folgenden Effekte erzielen?
1. Wie ordne ich mehrere Boxen (Divs) auf Blockebene horizontal in einer Reihe an?
Durch die Konvertierung in Inline-Blockelemente kann zwar eine Anzeigezeile erreicht werden, es entsteht jedoch ein großer Leerraum zwischen ihnen, der schwer zu kontrollieren ist.
<!doctypehtml><html><head><metacharset=UTF-8><metahttp-equiv=X-UA-Compatiblecontent=IE=edge><metaname=viewportcontent=width=device-width,initial-scale=1.0>< title>In der Mitte des Inline-Blocks ist eine Lücke</title><style>div{width:150px;height:200px;background-color:#d87093;display:inline-block;}</style></ head><body>< div>1</div><div>2</div><div>3</div></body></html>Laufergebnisse:
2. Wie richtet man zwei Kästchen links und rechts aus?
Es gibt viele Layouteffekte , die nicht mit dem Standardfluss ausgeführt werden können. Derzeit kann das Layout mithilfe von Floating vervollständigt werden. Weil Floating die Standardanordnung von Elementbeschriftungen ändern kann.
Die typischste Anwendung von Floats: Ermöglichen der Anzeige mehrerer Elemente auf Blockebene in einer Reihe.
Die erste Regel des Webseitenlayouts: Mehrere vertikal angeordnete Elemente auf Blockebene achten auf Standardfluss, mehrere horizontal angeordnete Elemente auf Blockebene achten auf Float!
<!doctypehtml><html><head><metacharset=UTF-8><metahttp-equiv=X-UA-Compatiblecontent=IE=edge><metaname=viewportcontent=width=device-width,initial-scale=1.0>< title>Mehrere Elemente auf Blockebene werden horizontal angeordnet und schwebend</title><style>div{float:left;width:150px;height:200px;background-color:#d87093;}</style></head>< Körper ><div>1</div><div>2</div><div>3</div></body></html>Laufergebnisse:
4. Was schwimmt?
Mit der Eigenschaft „float“ wird eine schwebende Box erstellt und zur Seite verschoben, bis der linke oder rechte Rand die Kante des enthaltenden Blocks oder einer anderen schwebenden Box berührt.
Grammatik:
Selektor {float: Attributwert;}Beispiel:
<!DOCTYPEhtml><html><head><metacharset=UTF-8><metahttp-equiv=X-UA-Compatiblecontent=IE=edge><metaname=viewportcontent=width=device-width,initial-scale=1.0>< title>Dokument</title><style>/*Floating-Labels sind oben ausgerichtet*//*Floating: in einer Zeile angeordnet, Breite und Höhe wirken sich aus – Floating-Labels haben die Eigenschaften von Inline-Blöcken*/.one{width :100px;height :100px;background-color:pink;float:left;margin-top:50px;}.two{width:200px;height:200px;background-color:skyblue;float:left;/*Weil es das gibt schwebend, kann es nicht wirksam werden. Das Feld kann nicht horizontal zentriert werden div>eins</div><div >zwei</div><div>drei</div></body></html>Laufergebnisse:
