CSS-Layout-Layoutmodell

Dieses Mal werde ich Ihnen das Layoutmodell des CSS-Layouts vorstellen. Was sind die Vorsichtsmaßnahmen des CSS-Layoutmodells?

In Webseiten gibt es drei Layoutmodelle:
1. Flussmodell (Flow) Standard
2. Ebenenmodell (Ebene)

1. Flow

Das Flow-Modell ist der Standard-Layoutmodus für Webseiten. Das heißt, die HTML-Webelemente der Webseite verteilen im Standardzustand den Webseiteninhalt gemäß dem Flussmodell.

Das Fluid-Layout-Modell weist zwei typische Merkmale auf:

Erstens werden Blockelemente vertikal erweitert und in der Reihenfolge von oben nach unten innerhalb des enthaltenden Elements verteilt, da in Standardmäßig die Breite von Blockelemente beträgt 100 %. Tatsächlich nehmen Blockelemente Positionen in Form von Zeilen ein.

(Jede Haftnotiz zeigt ihre ursprüngliche Standardbreite und -höhe an)

Zweiter Punkt: Unter dem Flussmodell bewegen sich Inline-Elemente innerhalb der horizontalen Verteilungsanzeige von links nach rechts. (

Inline-Elementesind nicht so dominant wie Blockelemente, die eine Zeile belegen)

2. Floating-Modell (Float)

Jedes Element kann standardmäßig nicht schweben definiert als Floating

div{float:left;}　div{float:right;}

mit CSS Sie können verschiedene Floating-Methoden für verschiedene Divs im Layout festlegen.

3. Ebenenmodell (Ebene)

Das Ebenenmodell hat drei Formen:

1. Relative Positionierung (

Position: relativ)

2.

Absolute Positionierung(Position: absolut)

3. Feste Positionierung (Position: fest)

Relative Positionierung

Wenn Sie möchten So legen Sie das Element fest: Um die relative Positionierung im Ebenenmodell festzulegen, müssen Sie position:relative festlegen (gibt die relative Positionierung an), wodurch die Versatzposition des Elements im normalen Dokumentfluss durch links, rechts, oben und bottom

Attribute. Bewegt sich relativ zur vorherigen Position und die Position vor dem Versatz bleibt unverändert. Bei Verwendung der relativen Positionierung nimmt das Element, auch wenn es versetzt ist, immer noch den Platz ein, bevor es versetzt wurde.

Absolute Positionierung

Wenn Sie die absolute Positionierung im Ebenenmodell für ein Element festlegen möchten, müssen Sie position:absolute festlegen (was die absolute Positionierung angibt) und das Element aus dem Dokument ziehen Flow, und verwenden Sie dann left. Die rechten, oberen und unteren Attribute werden relativ zu ihrem nächstgelegenen übergeordneten Block mit einem Positionierungsattribut absolut positioniert. Wenn kein solcher enthaltender Block vorhanden ist (d. h. für das Div davor ist kein Positionierungsattribut festgelegt), erfolgt die Positionierung relativ zum Body-Element, d. h. relativ zum Browserfenster.

Elemente, die auf absolute Positionierung eingestellt sind, belegen keinen Platz im Dokumentenfluss. Wenn ein Element auf absolute Positionierung eingestellt ist, wird seine Position im Dokumentenfluss gelöscht.

Wir können festlegen ihre Stapelreihenfolge durch

z-index

. Absolute Positionierung entfernt das Element aus dem Dokumentfluss und belegt daher keinen Platz. Das Layout des Elements im normalen Dokumentfluss ist das gleiche, als ob das absolut positionierte Element nicht vorhanden wäre Der Dokumentenfluss ignoriert das Element und füllt seinen früheren Platz. Da absolut positionierte Boxen unabhängig vom Dokumentenfluss sind, können sie andere Elemente auf der Seite überdecken. ​

Die Positionierung des schwebenden Elements basiert weiterhin auf dem normalen Dokumentfluss. Anschließend wird es aus dem Dokumentfluss extrahiert und so weit wie möglich nach links oder rechts verschoben, sodass der Textinhalt das schwebende Element umgibt Element. Es ändert nur die Anzeige des Dokumentenflusses, bricht jedoch nicht vom Dokumentenfluss ab. Wenn Sie dies verstehen, ist es leicht herauszufinden, wann Positionierung und wann Floating verwendet werden sollte.

Feste Positionierung

fest: 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 Position innerhalb der Ansicht innerhalb des Browserfensters sein, die nicht vom Fluss des Dokuments beeinflusst wird.

Relative Positionierung kann gemischt mit absoluter Positionierung verwendet werden. Das Prinzip lautet: Solange das übergeordnete Div das Positionierungsattribut definiert, wird das untergeordnete Div entsprechend der Position des übergeordneten Div

#div1{
position:fixed;
    bottom:0;
    right:0
}  (始终在屏幕由下端有一个div框，会一直跟着滚动条走)

Ich glaube, ich habe es gesehen. Sie beherrschen die Methoden in diesen Fällen. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Verwandte Lektüre:

So lösen Sie das Problem der abnormalen Anzeige, nachdem layer.photos() die Bildadresse asynchron geändert hat

Wie Überwachen Sie, ob die AngularJs-Listendaten gerendert wurden

Die Beziehung zwischen ES6-„Klassen“ und objektorientiert

Das obige ist der detaillierte Inhalt vonCSS-Layout-Layoutmodell. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!