Zusammenfassung der CSS-Schwebeelementanalyse

Float: links/rechts/keine;

1. Gleichstufiges Schweben

(1) Sorgen Sie dafür, dass Elemente auf Blockebene in derselben Zeile angezeigt werden (alle Elemente, die in derselben Zeile angezeigt werden sollen, müssen schwebend sein).

<div Klasse="Box1">Box1</div>
<div Klasse="box2">Box2</div>
<div Klasse="box3">Box3</div>


.box1{
	Rand: 2px durchgehend rot;
	Breite: 40px;
	Höhe: 100px;
	schweben: links;
}
.box2{
	Rand: 6px tief schwarz;
	Breite: 100px;
	Höhe: 40px;
	schweben: links;
}
.box3{
	Rand: 12px durchgehend blau;
	Breite: 100px;
	Höhe: 300px;
	schweben: links;
} 

(2) Sorgen Sie dafür, dass Inline-Elemente Breite und Höhe unterstützen

<span class="box1"></span>
.box1{
	Rand: 2px durchgehend rot;
	Breite: 40px;
	Höhe: 100px;
	schweben: links;
} 

3. Wenn Breite oder Höhe nicht festgelegt sind, werden Breite und Höhe durch den Inhalt erweitert.

<span class="box1">hallo</span>

.box1{
	Rand: 2px durchgehend rot;
	schweben: links;
} 

4. Wenn Sie einem Element Float hinzufügen, liegt es außerhalb des Standarddokumentflusses (Dokumentenfluss bezieht sich auf die Position des Objekts im Dokument) und sucht nach nicht schwebenden Elementen, um es abzudecken (rückwärts schwebend), und es hat nichts mit den vorherigen Elementen zu tun.

<div Klasse="Box1"></div>
<div Klasse="box2"></div>
<div Klasse="box3"></div>


.box1{
	Rand: 1px durchgehend rot;
	Breite: 40px;
	Höhe: 100px;
	schweben: links;
}
.box2{
	Rand: 4px durchgehend blau;
	Breite: 140px;
	Höhe: 40px;
	schweben: links;
}
.box3{
	Rand: 8px durchgehend grau;
	Breite: 200px;
	Höhe: 200px;
	
} 

5. Wenn ein Element schwebt, verlässt es zuerst den Standardfluss und schwebt dann entsprechend der Schweberichtung, bis es die Grenze des vorherigen schwebenden Elements erreicht und stoppt oder herunterfällt, weil die vorherige Ebene das Element nicht aufnehmen kann und in der nächsten Zeile platziert wird.

<div Klasse="Box1"></div>
<div Klasse="box2"></div>
<div Klasse="box3"></div>


.box1{
	Rand: 11px durchgehend rot;
	Breite: 40px;
	Höhe: 100px;
	schweben: rechts;
	
}
.box2{
	Rand: 4px durchgehend blau;
	Breite: 140px;
	Höhe: 40px;
	schweben: links;
	
}
.box3{
	Rand: 8px durchgehend grau;
	Breite: 200px;
	Höhe: 200px;
} 

6. Wenn ein Element A auf einem Element B schwebt, das nicht schwebt, wird die ursprüngliche Position des Inhalts von B herausgedrückt oder sogar herausgedrückt

<div Klasse="Box1">Box1</div>
<div Klasse="box2">Box2</div>
<div Klasse="box3">Box3</div>


.box1{
	Rand: 11px durchgehend rot;
	Breite: 40px;
	Höhe: 100px;
	
	
}
.box2{
	Rand: 4px durchgehend blau;
	Breite: 60px;
	Höhe: 100px;
	schweben: links;
	
}
.box3{
	Rand: 8px durchgehend grau;
	Breite: 200px;
	Höhe: 200px;
} 

Wenn ein Element schwebt, wird bei der Analyse nur das Element davor betrachtet. Wenn das vorherige Element ebenfalls schwebt, wird es nebeneinander angezeigt. Wenn das vorherige Element nicht schwebt, bleibt die relative Position unverändert.

Detaillierte Analyse: https://www.jb51.net/web/76691.html

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.