Was sind die CSS-Layoutmodelle? Einführung in die drei Layoutmodelle von CSS

Standard-Webseitenlayoutmodus
* Blockelemente werden vertikal erweitert und von oben nach unten innerhalb des enthaltenden Elements
verteilt * Inline-Elemente werden horizontal von links nach rechts innerhalb des enthaltenden Elements angezeigt

Jedes Element kann standardmäßig nicht Floating verwendet werden, kann aber sein definiert mit CSS als float

Es gibt drei Formen von Ebenenmodellen:
- Absolute Positionierung (Position: absolut)
- Relative Positionierung (Position: relativ)
- Feste Positionierung (Position: fest)

Das Ebenenlayoutmodell ähnelt der sehr beliebten Ebenenbearbeitungsfunktion in der Bildsoftware PhotoShop. Jede Ebene kann genau positioniert und bedient werden

position:absolute (zeigt die absolute Positionierung an). Die Funktion dieser Anweisung besteht darin, das Element aus dem Dokumentfluss zu ziehen und dann links, rechts, top: Die untere Eigenschaft wird absolut relativ zu ihrem nächsten übergeordneten Block positioniert, der über eine Positionierungseigenschaft verfügt. Wenn kein solcher enthaltender Block vorhanden ist, ist er relativ zum Body-Element, also relativ zum Browserfenster.

实现div元素相对于浏览器窗口向右移动100px，向下移动50px。
div{
    width:200px;    
    height:200px;    
    border:2px red solid;    
    position:absolute;    
    left:100px;    
    top:50px;
    }
    <div id="div1"></div>

Position: relativ (gibt die relative Positionierung an), die nach links verläuft Die Attribute „rechts“, „oben“ und „unten“ bestimmen die Versatzposition des Elements im normalen Dokumentfluss. 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. Die Richtung und Amplitude der Bewegung werden durch die linke und rechte Position bestimmt , oben und unten bleibt die Position vor dem Versatz unverändert.

相对于以前位置向下移动50px，向右移动100px;
#div1{
    width:200px;    
    height:200px;    
    border:2px red solid;    
    position:relative;    
    left:100px;    
    top:50px;
    }
<div id="div1"></div>

fest: Zeigt eine feste Positionierung an, ähnlich dem absoluten Positionierungstyp. Aber die Koordinaten seiner relativen Bewegung sind die Ansicht (das 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 im Browserfenster sein, die vom Fluss des Dokuments nicht beeinflusst wird. Dies hat die gleiche Funktion wie das Attribut „background-attachment:fixed“.

Position relativ zu anderen Elementen