Werfen wir einen Blick auf das Grid-Design der Site und schlüsseln die einzelnen Komponenten auf. Lassen Sie uns untersuchen, warum Float so nützlich ist, sowie die beliebte Technik zum Erstellen des ersten Web-Grids aus drei Streams und einer Site-Fußzeile.
Um die Rasterkonstruktion einer Site zu untersuchen, müssen Sie verstehen, was ein "Flow" ist. Flow sind die Elemente der Site, die nacheinander angeordnet sind. Dies können beispielsweise div-Elemente sein, die standardmäßig hintereinander stehen. Aber der Fluss kann neu angeordnet werden und die Position der Blockelemente kann geändert werden.
Um den Fluss zu steuern, verwenden wir die float-Eigenschaft, die den Block auf der linken oder rechten Seite platzieren kann. Es genügt, in die CSS-Datei zu schreiben:
"Klassen- oder Blockname" {float: right / left; }
Der einzige Nachteil von Float ist die Möglichkeit, einen Block über einen anderen zu "überlappen".
Um ein Überlaufen zu vermeiden, verwenden wir clear: Both - diese Eigenschaft legt den Fluss um den Block herum fest. Wir setzen die Breite und Höhe als Maximum und Minimum, so dass der Wert entsprechend der Größe des Inhalts (Text, Bilder) gebildet wird. Margin - Setzen Sie den Wert auf auto, damit externe Ränder automatisch je nach Position des Blocks gebildet werden.
Da Float Blöcke in zwei Richtungen platzieren kann, ist es üblich, die Site in Streams zu unterteilen - links und rechts. Benötigt der Programmierer nur zwei Streams, so lässt er die linken und rechten Floats, sind es aber mehr als zwei, dann passt er die Ränder mit margin an. Wie kommt es dazu:
.column1 {float: links; Breite: 65px; Mindesthöhe: 50px; Rand rechts: 9px; // 9px vom Mittelfeld}
2 Strom:
.column2 {float: links; // zum linken Block, aber ohne "Überlappung", da wir die Randbreite angewendet haben: 80px; Mindesthöhe: 50px; }
3 strom:
.column3 {float: rechts; Breite: 65px; Mindesthöhe: 50px; }
Umgang mit der Fußzeile (.footer):
. Fußzeile {klar: beides; // um beide Seiten wickeln}
So haben wir mit float ein Raster für die Site erstellt, das aus drei Streams besteht.
