Welche drei Layouts gibt es in HTML?

Flow-Layout (das Standardlayout von HTML-Webseiten)

(Video-Tutorial-Freigabe: HTML-Video-Tutorial)

Funktionen:

1. Blockelemente werden von oben nach unten innerhalb des enthaltenden Elements platziert. Erweitern Sie die Verteilung der Reihe nach vertikal, da Blockelemente standardmäßig eine Breite von 100 % haben.

2. Inline-Elemente werden horizontal von links nach rechts innerhalb des enthaltenden Elements angezeigt. (Inline-Elemente sind nicht so dominant wie Blockelemente und belegen eine Zeile.)

Floating-Layout (Float)

Funktionen: Im Standardlayout sind Blockelemente so dominant, dass sie eine Zeile belegen Seite an Seite sein. Um dies zu erreichen, müssen Sie float verwenden.

Wie folgt: 3. Ebenenmodell: Wenn ich möchte, dass ein Div über einem anderen Div liegt, müssen wir die absolute Positionierung verwenden, um es zu vervollständigen. Die drei Positionierungsmethoden des Ebenenmodells sind relativ und absolut , und Fixed

absolute

muss position:absolute festlegen (was die absolute Positionierung angibt). Die Funktion dieser Anweisung besteht darin, das Element aus dem Dokumentfluss zu ziehen und dann die Attribute links, rechts, oben und unten relativ zu verwenden zu seinem nächsten übergeordneten Element mit Positionierungsattributen werden absolut positioniert. Wenn kein solcher enthaltender Block vorhanden ist, ist er relativ zum Body-Element, also relativ zum Browserfenster.

relative

Wenn Sie die relative Positionierung im Ebenenmodell für ein Element festlegen möchten, müssen Sie position:relative festlegen (gibt die relative Positionierung an), wodurch die Versatzposition des Elements im normalen Dokumentfluss durch die linke Seite bestimmt wird. Rechte, obere und untere Attribute. Der Prozess der relativen Positionierung besteht darin, zunächst ein Element im statischen (Float-)Modus zu erzeugen (und das Element schwebt wie eine Ebene) und sich dann relativ zur vorherigen Position zu bewegen. Die Richtung und Amplitude der Bewegung werden durch die linke und rechte Position bestimmt , oben und unten bleibt die Position vor dem Versatz unverändert.

fixed

fixed: Zeigt eine feste Positionierung an, ähnlich dem absoluten Positionierungstyp, aber seine relativen Bewegungskoordinaten sind die Ansicht (Webseitenfenster innerhalb des Bildschirms) selbst. Da die Ansicht selbst fest ist, ändert sie sich beim Scrollen der Bildlaufleiste des Browserfensters nicht, es sei denn, Sie verschieben die Bildschirmposition des Browserfensters auf dem Bildschirm oder ändern die Anzeigegröße des Browserfensters, sodass dies bei fest positionierten Elementen der Fall ist immer an einer bestimmten Position der Ansicht im Browserfenster sein, die vom Fluss des Dokuments nicht beeinflusst wird. Dies hat die gleiche Funktion wie das Attribut „background-attachment:fixed“.

Hinweis:

Bei Verwendung des Z-Index-Attributs verfügen nur Elemente, die das Positionsattribut verwenden, über das Z-Index-Attribut. Elemente, die das Positionsattribut nicht verwenden, verfügen nicht über das Z-Index-Attribut und es ist sinnlos, es festzulegen.

Verwandte Empfehlungen:

Das obige ist der detaillierte Inhalt vonWelche drei Layouts gibt es in HTML?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!