Zusammenfassung der Methoden zur Lösung von CSS-Randüberlappungen

Dieser Artikel stellt hauptsächlich mehrere Lösungen zur detaillierten Erklärung der CSS-Randüberlappung vor. Der Herausgeber findet es ziemlich gut. Jetzt werde ich es mit Ihnen teilen und Ihnen eine Referenz geben. Folgen wir dem Editor, um einen Blick darauf zu werfen

Heute haben wir verschiedene Möglichkeiten zur Verwendung von CSS zur Vermeidung von Randüberlappungen ermittelt

Nehmen wir zunächst eine Reihe von Dom-Strukturen an

<p class="parent">
    <p class="child">
    </p>
</p>

Wenn Sie einen Rand für ein untergeordnetes Element festlegen, hat dieses Attribut normalerweise den gleichen Effekt auf das übergeordnete Element.

Dies ist jedoch eigentlich nicht das gewünschte Ergebnis. Wir möchten den Rand nur für untergeordnete Elemente festlegen. Was sollen wir also jetzt tun?

(1) Legen Sie einen Rahmen für das übergeordnete Element fest.

.parent { 
    width: 300px;       
    height: 300px;
    border: 1px solid #ccc;
}
.child {
    width: 200px;
    height: 200px;
    margin: 20px;
}

(2) Fügen Sie Polsterung hinzu übergeordnetes Element

.parent {
    padding： 1px;
    width: 300px;
    height: 300px;
}
.child {
    width: 200px;
    height: 200px;
    margin: 20px;
}

(3) Fügen Sie ein Geschwisterelement mit Breite und Höhe über dem untergeordneten Element hinzu.

<p class="parent">
     <p style="width: 20px;height: 20px;margin-top: "></p>
     <p class="child">
     </p>
</p>

(4) Setzen Sie das Attribut „overflow: versteckt;“ auf das übergeordnete Element

.parent {
    overflow: hidden;
    width: 300px;
    height: 300px;
}
.child {
    width: 200px;
    height: 200px;
    margin: 20px;
}

(5) Stellen Sie display: inline-block für das untergeordnete Element ein (wenn das untergeordnete Element ein Inline-Element oder ein Inline-Block-Level-Element ist, tritt kein Problem mit der Randüberlappung auf )

.parent {
    width: 300px;
    height: 300px;
} 
.child {
    width: 200px;
    height: 200px;
    margin: 20px; 
    display: inline-block;
}

(6) Es gibt viele Möglichkeiten, dies zu erreichen, indem Unterelemente aus dem Dokumentenfluss herausgelöst werden, z. B. schwebend, absolut Positionierung usw. Ich werde hier keine detaillierte Erklärung geben.

Das obige ist der detaillierte Inhalt vonZusammenfassung der Methoden zur Lösung von CSS-Randüberlappungen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!