Ausführliche Erläuterung der Beispiele für erweiterte CSS-Layoutmodelle

CSS enthält drei Layoutmodelle: Flow, Float und Layer

Flussmodell

Das Standardlayoutmodell der Webseite weist zwei Merkmale auf:

1. Blockelemente werden im enthaltenden Element vertikal von oben nach unten verteilt, da die Breite der Blockelemente standardmäßig 100 % beträgt. Tatsächlich nehmen Blockelemente ihre Position in Form von Reihen ein.

<style type="text/css">
    h1,p,div{
        border:1px solid red;
    }
</style>

2. Unter dem Flussmodell werden Inline-Elemente horizontal von links nach rechts innerhalb des enthaltenden Elements angezeigt.

<a href="http://>www.baidu.com</a><span>hello</span><em>shit</em><strong>world</strong>

www.baidu.com Hallo Scheiße Welt wird horizontal in derselben Zeile angezeigt.

2. Floating-Modell FLoat

Jedes Element kann standardmäßig nicht schweben, kann jedoch mit CSS als schwebend definiert werden, z. B. div, p, table, img und andere Elemente können definiert werden Lassen Sie beispielsweise zum Schweben die folgenden zwei div-Elemente nebeneinander in derselben Zeile anzeigen

div{
    border:1px solid red;
    width:200px;
    height:200px;
    float:left;//从左向右排列
}
<div>hello</div>
<div>world</div>

3. Ebenenmodell Ebene

kann für HTML implementiert werden. Präzise Positionierung von Elementen (wird nicht sehr häufig verwendet, aber einige Effekte können durch lokale Verwendung von Ebenenmodellen erzielt werden)

Es gibt drei Arten von Ebenenmodellen:

Absolute Positionierung: position:absolute

Ziehen Sie das Element aus dem Dokumentfluss und verwenden Sie dann die Attribute links, rechts, oben und unten, um eine absolute Positionierung relativ zu seinem nächstgelegenen übergeordneten Block mit einer Positionierung durchzuführen Attribut. Wenn kein solcher enthaltender Block vorhanden ist, ist er relativ zum Body-Element, also relativ zum Browserfenster.

Verschieben Sie das div-Element um 100 Pixel nach rechts und 200 Pixel nach unten relativ zum Browserfenster

div{
    position:absolute;
    width:100px;
    height:100px;
    border:1px solid red;
    left:100px;
    top:200px;
}

relativ zu: position:relative

Bewegen Sie sich relativ zur vorherigen Position, Die Richtung und Amplitude der Bewegung werden durch die Attribute links, rechts, oben und unten bestimmt, und die Position vor dem Versatz bleibt unverändert (eh1 wird an der in der Abbildung gezeigten Position angezeigt, dies ist besonders wichtig zu beachten). ).

   .div1{
    position:relative;
    width:200px;
    height:200px;
    border:1px solid red;
    left:200px;
    top:200px;
}
<span>hello world>
<div class="div1">position:relative</div>
<span>eh1<span>

Feste Positionierung: position:fixed

Die relative Bewegungskoordinate ist 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 innerhalb des Browserfensters

#div2{
    position:fixed;
    bottom:100px;
    right:100px;
    width:200px;
    height:200px;
    border:1px solid red;
}
<div id="div2">position:fixed</div>

sein, sodass sich das Div immer in der unteren rechten Ecke des Fensters befindet, egal wie viel Inhalt sich im Browser befindet.

Die Kombination von position:absolute und position:relative wird verwendet

Aus dem oben Gesagten wissen wir, dass position:absolute relativ zum Browser positioniert ist. Sie können position:relative verwenden um position:absolute relative Positionierung anderer Elemente zu erreichen, müssen jedoch die folgenden Punkte erfüllt sein:

1. Das referenzierte Element muss das übergeordnete Element des positionierten Elements sein

2. Das referenzierte Element ist auf festgelegt position:relative

3. Setzen Sie das Positionierungselement auf position:absolute

#div1{
 border:1px solid red;
 width:200px;
 height:200px;
 position:relative;
}
#div2{
 border:1px solid red;
 width:50px;
 height:50px;
 left:20px;
 top:20px;
 position:absolute;
}
<div id="div1">
    <div id="div2">hello</div>
</div>

Auf diese Weise wird div2 relativ zu div1 positioniert.

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung der Beispiele für erweiterte CSS-Layoutmodelle. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!