Das Phänomen des Margin-Top-Collapses und die spezifische Lösung
|
Was ist ein Margin-Top-Collaps? Der Margin-Top-Collapse ist ein Phänomen, das im CSS-Boxmodell auftritt. Es beschreibt Folgendes: Wenn ein übergeordnetes Element ein untergeordnetes Element umschließt und die Margin-Top-Eigenschaft für das untergeordnete Element festgelegt ist, soll der Rand des untergeordneten Elements zu diesem Zeitpunkt lediglich einen bestimmten Abstand zum Rand des übergeordneten Elements aufweisen, die Oberseite des übergeordneten Elements soll jedoch vom Rand des Hauptteils verschoben sein. Dies ist das Phänomen des Margin-Top-Collapses. Wenn dem untergeordneten Element (grüner Teil) das Attribut „margin-top“ nicht hinzugefügt wird, sieht die Webseite folgendermaßen aus:
Wenn dem untergeordneten Element jedoch das Attribut „margin-top“ hinzugefügt wird, sieht die Webseite wie folgt aus:
Sie werden feststellen, dass sich der Abstand zwischen dem Rand des untergeordneten Elements und dem Rand des übergeordneten Elements (gelber Teil) nicht vergrößert hat. Stattdessen hat sich der Abstand zwischen dem oberen Rand des übergeordneten Elements und dem oberen Rand des Browsers vergrößert. Das heißt, das übergeordnete Element bewegt sich mit dem untergeordneten Element um eine bestimmte Distanz nach unten. Nach der Überprüfung entspricht dieser Abstand genau dem Wert des Attributs „margin-top“, den wir für das untergeordnete Element festgelegt haben. Dies ist das Phänomen des „margin-top-Collapse“. So lösen Sie den Margin-Top-Collapse Das Problem des Margin-Top-Collapses kann mithilfe der folgenden Punkte gelöst werden, die sich als wirksam erwiesen haben: 1. Fügen Sie dem übergeordneten Element einen Rahmen hinzu Um den ursprünglichen Bildeffekt nicht zu beeinträchtigen, können Sie die Rahmenfarbe auf Weiß einstellen (entspricht der Hintergrundfarbe des Browsers). 2. Überlauf verbergen Fügen Sie dem Stil des übergeordneten Elements overflow:hidden hinzu. 3. Verwenden Sie Float Fügen Sie dem Stil des übergeordneten Elements Float hinzu, diese Methode wird jedoch nicht empfohlen. Weil es unbekannte Fehler verursachen wird 4. Fügen Sie position:fixed zum übergeordneten Element hinzu. Das Wissen über die Positionierung wird hier genutzt, um das übergeordnete Element an einer festen Position anzuzeigen, sodass es nicht vom Problem des Zusammenbruchs des oberen Rands betroffen ist. 5. Stellen Sie „display: table“ auf das übergeordnete Element ein. 6. Verwenden Sie Pseudoelemente Pseudoelemente werden als Pseudoelemente bezeichnet, da es sich dabei nicht um echte Seitenelemente handelt und HTML keine entsprechenden Elemente besitzt. Da ihr Verwendungs- und Leistungsverhalten jedoch mit dem echter Elemente identisch ist, werden sie als Pseudoelemente bezeichnet.
.clearfix::before{
Inhalt: ";
Anzeige: Tabelle;
}
.clearfix ist ein weiterer Klassenname, der dem übergeordneten Element hinzugefügt wird. Dies ist die empfohlene Lösung, die das Problem des oberen Randkollapses lösen kann, ohne weitere zusätzliche unbekannte Fehler zu verursachen. Nachdem die Lösung nun ermittelt wurde, werfen wir einen Blick auf das Endergebnis, wie unten dargestellt:
Wie Sie sehen, verschiebt sich die aktuelle Position des untergeordneten Elements relativ zum übergeordneten Element und hat keinen Einfluss auf die Position des übergeordneten Elements. Der Debugcode ist unten angehängt:
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
<meta http-equiv="X-UA-kompatibel" content="ie=edge">
<title>10-Rand-Oberkante-Zusammenbruch</title>
<Stil>
.clearfix::before{
Inhalt: '';
Anzeige: Tabelle;
}
.Kasten{
Breite: 200px;
Höhe: 200px;
Hintergrundfarbe: Gold;
Rand: 0px automatisch;
}
.con{
Breite: 100px;
Höhe: 50px;
Hintergrundfarbe: grün;
Rand oben: 100px;
}
</Stil>
</Kopf>
<Text>
<div Klasse="Box Clearfix">
<div Klasse="con"></div>
</div>
</body>
</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. |
<<: Problem beim Ändern der Tabellengröße mithilfe relativer Breiten
>>: WeChat-Applet-Entwicklung Formularvalidierung WxValidate-Nutzung
Artikel empfehlen
Schritte zum Anpassen des Symbols in Vue
ant-design-vue passt die Verwendung von Ali Iconf...
Den Linux-Kernel erkunden: Die Geheimnisse von Kconfig
Erhalten Sie ein umfassendes Verständnis der Funk...
Dieser Artikel zeigt Ihnen, wie Sie mit CSS-Kombinationsselektoren spielen
CSS-Kombinationsselektoren umfassen verschiedene ...
Implementierung von zwei Basis-Images für die Docker-Bereitstellung von Go
1. golang:neuestes Basis-Image mkdir gotest Berüh...
Beispielschritte zum Implementieren von Klassenselektoren und Namensattributselektoren in js
Das Aufkommen von jQuery hat unsere Effizienz bei...
MySQL 5.7-Bereitstellung und Remotezugriffskonfiguration unter Linux
Vorwort: Vor Kurzem werde ich mit meinen Partnern...
Hilfe zum Webdesign: Datenreferenz für Web-Schriftgrößen
<br />Der Inhalt wurde aus dem Internet repr...
Anwendung und Implementierung des Datencache-Mechanismus für kleine Programme
Informationen zum Miniprogramm-Datencache Datenca...
SQL verwendet die Funktion ROW_NUMBER() OVER, um eine Sequenznummer zu generieren
Syntax: ROW_NUMBER() OVER(PARTITION BY COLUMN ORD...
Binäre Installation von MySQL 5.7.23 unter CentOS7
Die Installationsinformationen im Internet sind u...
JavaScript realisiert den Warteschlangenstrukturprozess
Inhaltsverzeichnis 1. Warteschlangen verstehen 2....
Implementierung einer verschiebbaren Komponente zum Teilen des linken und rechten Bedienfelds in Vue3
Inhaltsverzeichnis Komponenten zerlegen Linkes Fe...
Detaillierte Schritte zum Ändern gespeicherter MySQL-Prozeduren
Vorwort Bei der tatsächlichen Entwicklung werden ...
Praktische Methode zum Löschen von Dateien über die Linux-Befehlszeile
rm-Befehl Der Befehl rm wird von den meisten Benu...
WeChat-Applet zur automatischen Videowiedergabe imitiert Beispiel eines GIF-Animationseffekts
Nachfragehintergrund: Fügen Sie dynamische GIF-Bi...