So lösen Sie das Überlappungsproblem von Webseiten mit CSS

CSS-Methoden zum Auflösen überlappender Webseiten: 1. Legen Sie einen Rand für das übergeordnete Element fest. 2. Fügen Sie einen Abstand zum übergeordneten Element hinzu. 3. Fügen Sie ein Geschwisterelement mit Breite und Höhe über dem untergeordneten Element hinzu. „hidden“ für das übergeordnete Element ;“ Attribute usw.

Die Betriebsumgebung dieses Tutorials: Windows 7-System, HTML5- und CSS3-Version. Diese Methode ist für alle Computermarken geeignet.

Empfehlung: „CSS-Video-Tutorial“

CSS löst das Problem überlappender Ränder auf Webseiten

Im Folgenden werden Ihnen verschiedene Methoden zur Verwendung von CSS vorgestellt, um Randüberlappungen zu verhindern.

Nehmen Sie zunächst eine Reihe von DOM-Strukturen an

rrree

Normalerweise hat dieses Attribut den gleichen Effekt auf das übergeordnete Element. Dies ist jedoch nicht das Ergebnis, das wir nur wollen Ich möchte einen Rand für untergeordnete Elemente festlegen. Was sollen wir jetzt tun?

1. Legen Sie einen Rand zum übergeordneten Element fest

rrree

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

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

4. Setzen Sie das Attribut „overflow:hidden;“ auf das untergeordnete Element.

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

5 Es wird kein Problem mit Randüberlappungen geben.

Das obige ist der detaillierte Inhalt vonSo lösen Sie das Überlappungsproblem von Webseiten mit CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!