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

In diesem Artikel erfahren Sie, was die CSS-Layoutmodelle sind. Die Einführung der drei CSS-Layoutmodelle hat einen gewissen Referenzwert. Ich hoffe, dass sie für Sie hilfreich ist.

Flussmodell (Fluss)

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

Floating-Modell (Float)

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

两个 div 元素一行
div{
    width:200px;    
    height:200px;    
    border:2px red solid;    
    float:left;
    }
 <div id="div1"></div>
<div id="div2"></div>

设置两个元素 右浮动 实现一行 
float:right;
div{
    width:200px;    
    height:200px;    
    border:2px red solid;    
    float:right;
    }

设置两个元素一左一右
div{
    width:200px;    
    height:200px;    
    border:2px red solid;
    }
#div1{float:left;}
#div2{float:right;}

layer Model (layer)

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

1. Absolute Positionierung

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>

2. Relative Positionierung

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>

3. Feste Positionierung

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“.

相对于浏览器视图向右移动100px，向下移动50px。并且拖动滚动条时位置固定不变。
#div1{
    width:200px;   
     height:200px;    
        border:2px red solid;   
        position:fixed;    
        left:100px;    
        top:50px;
}
<p>文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本。</p> 
....

4. Verwenden Sie Relative in Kombination mit Absolute

Position relativ zu anderen Elementen

1、参照定位的元素必须是相对定位元素的前辈元素：
<div id="box1"><!--参照定位的元素-->
    <div id="box2">相对参照元素进行定位</div><!--相对定位元素-->
</div>box1是box2的父元素

2、参照定位的元素必须加入position:relative;
#box1{
    width:200px;    
    height:200px;    
    position:relative;        
}

3、定位元素加入position:absolute，便可以使用top、bottom、left、right来进行偏移定位了。
#box2{
    position:absolute;    
    top:20px;    
    left:30px;         
}

Verwandte Empfehlungen :

CSS-Layout Holy Grail Layout & Double Flying Wing Layout_html/css_WEB-ITnose

css+div Layout (1) - css+div Implementieren Sie die Tabelle layout_html/css_WEB-ITnose

CSS-Layout-Layoutmodell

Das obige ist der detaillierte Inhalt vonWas sind die CSS-Layoutmodelle? Einführung in die drei Layoutmodelle von CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!