Was sind die häufigsten Arten von HTML-Layouts? Analyse von drei Layoutmerkmalen von HTML

Welche gängigen Arten von HTML-Layouts gibt es? Es gibt drei Layout-Methoden in HTML: Fluid-Layout, Floating-Layout und Ebenenmodell. Jede dieser drei Layout-Methoden in HTML hat ihre eigenen Eigenschaften. In diesem Artikel wird kurz auf die Eigenschaften der drei Layout-Methoden in HTML eingegangen.

1. Fließendes Layout (das Standardlayout von HTML-Webseiten)

Funktionen:

1 Werden innerhalb des enthaltenden Elements vertikal der Reihe nach von oben nach unten erweitert, da die Breite von Blockelementen standardmäßig 100 % beträgt.

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)

2. Floating-Layout (Float)

Funktionen: Unter dem Im Standardlayout sind Blockelemente so aufdringlich, dass sie eine Zeile belegen. Wenn wir nun möchten, dass zwei Blockelemente nebeneinander angezeigt werden. Um dies zu erreichen, müssen Sie float verwenden.

ist wie folgt

div{
    width:200px;
    height:200px;
    border:2px red solid;
    float:right;
}

3. Ebenenmodell

Funktionen: Wenn ich möchte, dass ein Div oben liegt Ein weiteres Div. Wir müssen in der Lage sein, die absolute Positionierung zu verwenden, um die drei Positionierungsmethoden des Ebenenmodells zu vervollständigen: relativ, absolut, fest

Absolute Positionierung (absolut)

muss position:absolute festlegen (zeigt die absolute Positionierung an). Die Funktion dieser Anweisung besteht darin, das Element aus dem Dokumentfluss zu ziehen,
und dann die Attribute links, rechts, oben und unten zu verwenden, um eine absolute relative Positionierung durchzuführen zu seinem nächstgelegenen übergeordneten Block mit einem Positionierungsattribut.
Wenn kein solcher enthaltender Block vorhanden ist, ist er relativ zum Body-Element, also relativ zum Browserfenster.

Relative Positionierung (relativ)

Wenn Sie die relative Positionierung im Ebenenmodell für das Element festlegen möchten, müssen Sie position: relative festlegen (gibt die relative Positionierung an ),
it Bestimmen Sie die Versatzposition des Elements im normalen Dokumentfluss durch die Attribute links, rechts, oben und unten.
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 bestimmt durch die Attribute left und right , top und bottom werden bestimmt und die Position vor dem Versatz bleibt erhalten.

Feste Positionierung (fest)

fest: Zeigt eine feste Positionierung an, ähnlich dem absoluten Positionierungstyp,
aber seine relativen Bewegungskoordinaten befinden sich in der Ansicht (innerhalb von der Bildschirm (das Webseitenfenster) selbst.
Da die Ansicht selbst fest ist, ändert sie sich nicht, wenn die Bildlaufleiste des Browserfensters scrollt,
Es sei denn, Sie verschieben die Bildschirmposition des Browserfensters auf dem Bildschirm oder ändern die Anzeigegröße des Browserfensters ,
Daher befindet sich das fest positionierte Element immer irgendwo in der Ansicht innerhalb des Browserfensters und wird vom Fluss des Dokuments nicht beeinflusst
Dies hat die gleiche Funktion wie der Hintergrundanhang:fixed; Attribut.

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

Empfohlene verwandte Artikel:

Drei Möglichkeiten des HTML + CSS-Layouts (natürliches Layout /Flusslayout/Positionierungslayout)_HTML/Xhtml_Webseitenproduktion

Verwenden Sie HTML und HTML, um gängige Layouts zu implementieren_html/css_WEB-ITnose

Das obige ist der detaillierte Inhalt vonWas sind die häufigsten Arten von HTML-Layouts? Analyse von drei Layoutmerkmalen von HTML. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!