Einführung in das grundlegende Layout und die Formatposition in CSS

Fünf grundlegende Layout-Positionierungstypen: * Flexibles Layout – die Gesamtbreite und die Werte aller darin enthaltenen Spalten werden in Em-Einheiten geschrieben. Dadurch sollte das Layout mit der vom Browser angegebenen Basisschriftgröße skaliert werden können. Dies könnte für Benutzer mit Sehbehinderung attraktiver und zugänglicher sein, da die Spaltenbreiten breiter werden, was komfortablere und lesbarere Zeilenlängen bei jeder Größe ermöglicht. Da die Gesamtbreite skaliert wird, muss Ihr Design diese Breite berücksichtigen. * Festes Layout – Die Gesamtbreite und die Werte aller darin enthaltenen Spalten werden in Pixel geschrieben. Das Layout wird im Browser des Benutzers zentriert. * Fließendes Layout – die Gesamtbreite und die Werte aller darin enthaltenen Spalten werden in Prozent angegeben. Der Prozentsatz wird aus der Größe des Browserfensters des Benutzers berechnet. * Hybrid-Layout – Das Hybrid-Layout kombiniert zwei andere Arten von Layouts – elastisch und flüssig. Die Gesamtbreite der Seite beträgt 100 %, die Seitenleistenwerte sind jedoch auf em-Einheiten eingestellt. * Absolut positioniertes Layout – Alle äußeren Spalten der oben genannten Layouts verwenden schwebenden Inhalt. Und ein absolut positioniertes Layout macht genau das, was sein Name verspricht – mit einer absolut positionierten Außenspalte. Es muss beachtet werden, dass bei der Verwendung dieser Layouts die Seitenleiste „den Fluss des Dokuments erhöht“ und daher zu unangemessenen Ergebnissen führen kann (z. B. kann die Fußzeile dort „unsichtbar“ sein, wo die Seitenleiste endet und im Hauptinhaltsbereich enthalten ist). Seite mit weniger Inhalt als die Seitenleiste überlappt die Fußzeile).

Die erste Positionsbeziehung: position:fixed sperrt die Position (relativ zur Position des gesamten Browsers), was häufig in kleinen Anzeigen in der unteren rechten Ecke großer Websites oder an anderen Orten verwendet wird.

Wenn Sie die Verriegelungsposition anpassen müssen, müssen Sie die folgende Methode verwenden:

Die zweite Positionsbeziehung: Position: absolute absolute Position (relativ zum übergeordneten Element - dem Browser, dem Vorgesetzten der absoluten Positionierung)

(1) Wenn am äußersten Rand kein Absolutes vorhanden ist, ändert sich das Div relativ an den Browser beim Anpassen; (2) Der äußerste Bei absolut ändert sich das div relativ zum äußersten Rand, wenn es angepasst wird.

Wenn Sie die absolute Position anpassen müssen, müssen Sie die folgende Methode verwenden: