Bei der Verwendung von Uniapp für Projekte bin ich auf das Problem der Randverschmelzung und des Randzusammenbruchs gestoßen. Ich werde es hier aufzeichnen und die Lösung teilen.
Problem: Wenn zwei Container verschachtelt sind und sich zwischen dem äußeren Container und dem inneren Container keine anderen Elemente befinden, wird der obere Rand des inneren Elements auf das übergeordnete Element angewendet.
Bei Verwendung von argin-top ist das erste Element abnormal , es gibt keine Lücke, wird jedoch auf das übergeordnete Element angewendet ( Margin Collapse wird auch Margin Merging genannt ), während das zweite und dritte Element normal sind, wie unten gezeigt.
In der oben dargestellten Situation besteht das Problem der Margenverschmelzung und des Margenzusammenbruchs.
Lösung: Es kann durch Auslösen von BFC (vollständiger Blockformatierungskontext, Formatierungskontext auf Blockebene) gelöst werden. Die Lösung lautet wie folgt:
Methode 1. Rahmen zum übergeordneten Element hinzufügen
Zum Beispiel: border:1px solid #00FFFF;
Methode 2. Fügen Sie dem übergeordneten Element Polsterung hinzu
Zum Beispiel: padding:1px;
Methode 3: Verwenden Sie einen Überlauf, um den Kollaps zu lösen.
Zum Beispiel: Überlauf: versteckt;
Methode 4. Position:fixed zum übergeordneten Element hinzufügen;
Nutzen Sie das Wissen über die Positionierung, um das übergeordnete Element an einer festen Position anzuzeigen, sodass es nicht vom Problem des Zusammenbruchs des oberen Rands betroffen ist.
Methode 5. Anzeige: Tabelle auf das übergeordnete Element setzen;
Methode 6. Pseudoelemente verwenden
.clearfix::before{
content: '';
display: table;
}Fügen Sie einfach den Clearfix-Klassennamen zu dem Element hinzu, dessen Kollaps gelöscht werden soll.
Gründe für den Zusammenbruch:
Wenn der obere Rand des ersten untergeordneten Elements des übergeordneten Elements nicht auf einen gültigen Rand oder Abstand oder nicht leeren Inhalt treffen kann, wird der obere Rand des übergeordneten Elements Schicht für Schicht zu einem einzigen Rand oben zusammengeführt. Daher können Sie verhindern, dass die Ränder des übergeordneten Elements zusammengeführt werden, solange Sie einen gültigen Rahmen oder Abstand für das übergeordnete Element festlegen oder einen nicht leeren Inhalt (z. B. Text) vor dem untergeordneten Element hinzufügen.
Nach der Änderung wurde das Problem erfolgreich gelöst, wie unten gezeigt. Es ist nun ersichtlich, dass auch das erste Elementintervall normal angezeigt wird.
