Welche Layoutmethoden gibt es für HTML-Webseiten?

Zusammenfassung der drei Layoutmethoden von HTML

1 Gewöhnlicher Ablauf

Auch bekannt als regulärer Fluss , die Standardformatierungsmethode des Browsers. Der normale Fluss ist in den meisten Fällen die Art und Weise, wie Elemente auf einer Webseite gerendert werden. Der gesamte HTML-Code befindet sich in Blockboxen (Elemente auf Blockebene) oder Inline-Boxen (Inline-Elemente). Wenn ein Browser mit der Darstellung eines HTML-Dokuments beginnt, weist er den Elementen den benötigten Platz zu, beginnend am oberen Rand des Fensters und arbeiten sich durch den Dokumentinhalt. Sofern die Abmessungen des Dokuments nicht ausdrücklich durch CSS eingeschränkt werden, erweitert der Browser das Dokument vertikal, um den gesamten Inhalt aufzunehmen. Jedes neue Element auf Blockebene wird als neue Zeile gerendert. Inline-Elemente (Inline-Element-/Inline-Block-Ebene) werden der Reihe nach horizontal gerendert, bis die aktuelle Zeile auf eine Grenze stößt, und dann für das vertikale Rendering zur nächsten Zeile wechseln.

2 Positionierungsfluss

1> absolut, absolute Positionierung: absolut positionierte Elemente Die Position wird relativ zum nächstgelegenen positionierten (Positionierungsfluss) Vorgängerelement (relativ/absolut/fest) bestimmt. Wenn das Element keine positionierten Vorfahren hat, ist seine Position relativ zum anfänglichen enthaltenden Block (Körper). Die Position des

-Elements wird durch die Attribute „left“, „top“, „right“ und „bottom“ angegeben.

Absolut positionierte Elemente liegen außerhalb des Standardflusses. Nimmt im Standard-Stream keinen Platz ein.

Absolut positionierte Elemente unterscheiden nicht zwischen Elementen auf Blockebene/Inline-Elementen/Inline-Elementen auf Blockebene.

Wenn ein absolut positioniertes Element den Körper als Referenzpunkt verwendet, verwendet es tatsächlich die Breite und Höhe des ersten Bildschirms der Webseite als Referenzpunkt und nicht die Breite und Höhe der gesamten Webseite . Das positionierte Element wird beim Scrollen der Seite gescrollt.

Wenn eine Box absolut positioniert ist, kann margin: 0 auto nicht verwendet werden; um die Box selbst zu zentrieren, können Sie left: 50% verwenden: - Stellen Sie die Elementbreite auf halbe Pixel ein, um sie zu zentrieren.

2> fest, feste Positionierung: Die feste Positionierung kann als eine Art absolute Positionierung verstanden werden. Feste Positionierungselemente werden relativ zum Browserfenster positioniert. Dies ermöglicht die Erstellung von Elementen, die immer an einer festen Position im Fenster erscheinen. Die Position des

-Elements wird durch die Attribute „left“, „top“, „right“ und „bottom“ angegeben.

Elemente mit fester Position liegen außerhalb des Standardflusses und belegen keinen Platz im Standardfluss. Das kann als Löschung aus dem Standard-Stream verstanden werden.

Fest positionierte Elemente unterscheiden nicht zwischen Elementen auf Blockebene/Inline-Elementen/Inline-Elementen auf Blockebene.

E6 und niedrigere Versionen unterstützen keine feste Positionierung und können mit Javascript gelöst werden.

3> erben, Vererbung: erbt den Wert des Positionsattributs des übergeordneten Elements.

4> relativ, relative Positionierung: Relative Positionierung bedeutet, sich relativ zu seiner vorherigen Position im normalen Fluss zu bewegen. Das heißt, relativ zu seiner normalen Position positioniert.

Bei Verwendung der relativen Positionierung nimmt das Element immer noch den ursprünglichen Platz ein, unabhängig davon, ob das Element verschoben wird, sodass das Verschieben des Elements dazu führt, dass es andere Felder verdeckt.

Bei der relativen Positionierung kann nur ein Positionierungsattribut in die gleiche Richtung verwendet werden.

Die relative Positionierung weicht nicht vom Standardablauf ab. Unterscheiden Sie daher bei der relativen Positionierung zwischen Elementen auf Blockebene/Inline-Elementen/Inline-Elementen auf Blockebene. Und da relativ positionierte Elemente Positionen im Standardfluss belegen, wirkt sich das Festlegen von Attributen wie Rand/Abstand für relativ positionierte Elemente auf das Layout des Standardflusses aus.

5> statisch, statische Positionierung: Standardwert, keine Positionierung, das Element erscheint im normalen Fluss, dh im normalen Fluss oben, ohne Berücksichtigung von oben, unten und links , rechts Oder Z-Index-Deklaration.

3 Floating Flow

Floating Flow verfügt nur über eine Satzmethode, nämlich den horizontalen Satz. Es kann nur ein Element auf die linke oder rechte Ausrichtung eingestellt werden. Die zuerst schwebenden Elemente werden vorne angezeigt und die später schwebenden Elemente werden hinten angezeigt.

Es gibt keine zentrale Ausrichtung im schwebenden Fluss und es gibt keinen zentralen Wert. Margin: 0 auto kann nicht in Floating-Streams verwendet werden.

Im schwebenden Fluss wird nicht zwischen Elementen auf Blockebene/Inline-Elementen/Inline-Elementen auf Blockebene unterschieden. Unabhängig davon, ob es sich um Elemente auf Blockebene/Inline-Elemente/Inline-Elemente auf Blockebene handelt, können sie horizontal gesetzt werden. Sowohl Breite als auch Höhe können eingestellt werden.

Wenn ein Element auf Float eingestellt ist, wird es vom Standardfluss getrennt (außerhalb des Standards) und nimmt keinen Platz im Standardfluss ein. Wenn das folgende Element zu diesem Zeitpunkt nicht schwebt, überdeckt dieses Element zu diesem Zeitpunkt das folgende Element.

1> erben, Vererbung: erbt den Wert des Float-Attributs des übergeordneten Elements.

2> links, schwebend nach links: Das Element schwebt nach links. Derjenige, der zuerst schwimmt, ist links und derjenige, der später schwimmt, ist rechts.

3> keine, nicht gleitend: Standardwert.

4> right, float right: Das Element schwebt nach rechts. Derjenige, der zuerst schwimmt, ist rechts und derjenige, der später schwimmt, ist links.

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