Lösung für den ineffektiven Rand von in HTML verschachtelten Divs

Hier ist eine Lösung für das Problem, dass der Rand bei verschachtelten Divs nicht funktioniert.

Lassen Sie uns übrigens die Definition und Verwendung von Marge lernen.

Div verschachtelter HTML-Code:

<!DOCTYPE html>
<html lang="de">
<Kopf>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
    <title>Dokument</title>
    <style type="text/css">
        *{
            Rand: 0;
            Polsterung: 0;
        }
        Körper{
            Breite: 100 %;
            Höhe: 100%;
            Hintergrundfarbe: Dodgerblue;
        }
        .Kasten{
            Breite: 300px;
            Höhe: 300px;
            Rand: 30px;
            Hintergrundfarbe: grau;
        }
        .box .kind{
            Breite: 200px;
            Höhe: 200px;
            Rand: 50px;
            Hintergrundfarbe: Dunkeltürkis;
        }
    </Stil>
</Kopf>
<Text>
    <div Klasse="Box">
        <div Klasse="Kind">

        </div>
    </div>
</body>
</html>

Tatsächliche Wirkung:

Dies ist eigentlich nicht der gewünschte Effekt. Lassen Sie uns zunächst darüber sprechen, warum dieses Problem auftritt:

Es gibt zwei verschachtelte Divs. Wenn der Füllwert des übergeordneten Elements des äußeren Divs 0 ist, wird der obere oder untere Randwert des inneren Divs auf das äußere Div „übertragen“.

Um dieses Problem zu lösen, müssen wir zunächst eine Eigenschaft verstehen, die nur im Internet Explorer vorkommt: haslayout.

Der Effekt, den wir erzielen möchten, ist dieser:

Lassen Sie uns abschließend über die Lösung sprechen:

1. Lassen Sie das übergeordnete Element einen Blockformatierungskontext generieren (Formatierungskontext auf Blockebene, Sie können mehr darüber auf Baidu erfahren). Die folgenden Eigenschaften können erreicht werden

schweben: links/rechts

Position: absolut

Anzeige: Inline-Block

Überlauf: versteckt/automatisch

2. Fügen Sie dem übergeordneten Element einen Rahmen oder eine Polsterung hinzu

Nehmen Sie overflow:hidden von Methode 1 als Beispiel:

<!DOCTYPE html>
<html lang="de">
<Kopf>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
    <title>Dokument</title>
    <style type="text/css">
        *{
            Rand: 0;
            Polsterung: 0;
        }
        Körper{
            Breite: 100 %;
            Höhe: 100%;
            Hintergrundfarbe: Dodgerblue;
        }
        .Kasten{
            Breite: 300px;
            Höhe: 300px;
            Rand: 30px;
            Hintergrundfarbe: grau;
            Überlauf: versteckt;
        }
        .box .kind{
            Breite: 200px;
            Höhe: 200px;
            Rand: 50px;
            Hintergrundfarbe: Dunkeltürkis;
        }
    </Stil>
</Kopf>
<Text>
    <div Klasse="Box">
        <div Klasse="Kind">

        </div>
    </div>
</body>
</html>

Endergebnis:

Dies ist das Ende dieses Artikels zur Lösung des Problems, dass Ränder nicht funktionieren, wenn Divs in HTML verschachtelt sind. Weitere verwandte Inhalte zum Thema „Ränder funktionieren nicht, wenn Divs in HTML verschachtelt sind“ finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!

<<: Detaillierte Erläuterung des Zahlungsfunktionscodes des Vue-Projekts

>>: Drei Möglichkeiten, um einen Textblinkeffekt im CSS3-Beispielcode zu erzielen

Beispiel für den Export und Import von Docker-Containern

Artikel empfehlen

Detaillierte Erklärung, wie MySQL bestimmt, ob eine InnoDB-Tabelle ein unabhängiger Tablespace oder ein gemeinsam genutzter Tablespace ist

Vorwort InnoDB speichert Daten in Tablespaces. In...

Lösung für den ineffektiven Rand von in HTML verschachtelten Divs

Beispiel für den Export und Import von Docker-Containern

JavaScript verwendet Promise zur Verarbeitung mehrerer wiederholter Anfragen

XHTML-Einführungstutorial: Webseitenkopf und DTD

CSS Sticky Footer-Implementierungscode

Zusammenfassung der benutzerdefinierten JavaScript-Objektmethoden

Mysql aktualisiert die Datenbank dynamisch - Skriptbeispiel - Erklärung

So legen Sie Remotezugriffsberechtigungen in MySQL 8.0 fest

Konfigurieren von MySQL und Squel Pro auf dem Mac

So implementieren Sie eine Multi-Terminal-Bridging-Plattform basierend auf WebSocket in JS

Details der benutzerdefinierten Vue-Anweisung

Artikel empfehlen

Detaillierte Erklärung, wie MySQL bestimmt, ob eine InnoDB-Tabelle ein unabhängiger Tablespace oder ein gemeinsam genutzter Tablespace ist

HTML-Grundlagen-Zusammenfassungsempfehlung (Textformat)

Erstellen Sie in 5 Minuten einen WebRTC-Videochat

js zum Aufrufen der Netzwerkkamera und Behandeln häufiger Fehler

So installieren Sie die Yum-Quelle und laden die Befehle rz und sz unter CentOS7 hoch und herunter (mit Bildern)

So verwenden Sie den EXPLAIN-Befehl in SQL

Detaillierte Erklärung der grundlegenden Verwendung des VUE Watch Listener

CSS horizontale Zentrierung und Begrenzung der maximalen Breite

Windows CVE-2019-0708: Problem bei der Reproduktion der Sicherheitslücke bei der Codeausführung auf Remotedesktop

jQuery implementiert das Bouncing-Ball-Spiel

Lösung für den Fehler „Mehrere Primärschlüssel definiert“ in MySQL

Detaillierte Erläuterung des direkten Routings bei der hostübergreifenden Kommunikation von Docker-Containern

Lösung für Vues Unfähigkeit, Array-Änderungen zu beobachten

Linux CentOS 6.5: Anleitung zum Deinstallieren, Tarieren und Installieren von MySQL

Verwendung und Analyse des Mysql Explain-Befehls