Was sind die Layoutmethoden von HTML?

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

Funktionen:

1. Blockelemente werden dort angezeigt, wo sie sind Die enthaltenden Elemente erstrecken sich vertikal von oben nach unten, da die Breite der Blockelemente standardmäßig 100 % beträgt.

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

2. Float-Layout (Float)

Funktionen: Im Standardlayout sind Blockelemente so aufdringlich Sie belegen alle eine Zeile, wenn wir nun wollen, dass zwei Blockelemente nebeneinander angezeigt werden. Um dies zu erreichen, müssen Sie float verwenden.

ist wie folgt

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

3. Ebenenmodell

Funktionen: Wenn ich möchte, dass ein p in einem anderen liegt p Oben müssen wir in der Lage sein, die absolute Positionierung zu verwenden, um die drei Positionierungsmethoden des Ebenenmodells zu vervollständigen: relativ, absolut, fest

absolute

Sie müssen position:absolute festlegen (was die absolute Positionierung anzeigt).
Dann verwenden Sie die linke, rechte Position , Top- und Bottom-Attribute relativ zu seiner niedrigsten Position. Die absolute Positionierung wird von einem nahegelegenen übergeordneten Block durchgeführt, der über ein Positionierungsattribut verfügt.
Wenn kein solcher enthaltender Block vorhanden ist, ist er relativ zum Body-Element, also relativ zum Browserfenster.

relativ

Wenn Sie die relative Positionierung im Ebenenmodell für das Element festlegen möchten, müssen Sie position:relative (angebend) festlegen relative Positionierung),
Es bestimmt 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 left und right , top und bottom Attribute werden bestimmt und die Position vor dem Versatz bleibt erhalten.

fest

fest: zeigt eine feste Positionierung an, ähnlich dem absoluten Positionierungstyp,
aber seine relativen Bewegungskoordinaten sind Ansichten ( die Webseitenfenster innerhalb des Bildschirms) 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 die Z-Index-Eigenschaft. Elemente, die das Positionsattribut nicht verwenden, verfügen nicht über das Z-Index-Attribut und es ist sinnlos, es

Das obige ist der detaillierte Inhalt vonWas sind die Layoutmethoden von HTML?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!