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

Implementierung des Seitenumblättereffekts durch Gleiten und des Klickereignisproblems auf dem mobilen Endgerät

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

Implementierung des Seitenumblättereffekts durch Gleiten und des Klickereignisproblems auf dem mobilen Endgerät

Detaillierte Einführung in die Linux-Firewall iptables, Konfigurationsmethode und Fall

Detailliertes Tutorial zur Installation von VirtualBox 6.0 auf CentOS 8 / RHEL 8

React implementiert dynamische Popup-Fensterkomponente

Wählen Sie die besten Voreinstellungen aus, um vollständige Kompatibilität mit allen Browsern zu erreichen.

Ausführliches Tutorial zur Installation von MySQL 8.0.19 (Windows 64 Bit)

Gründe, warum MySQL Kill Threads nicht beenden kann

JS asynchroner Code Unit-Test Magie Promise

Auszeichnungssprache - Anker

Implementierung zum Erstellen benutzerdefinierter Images mit Dockerfile

Artikel empfehlen

JavaScript, um das Bild mit der Maus zu bewegen

Docker installiert das offizielle Redis-Image und ermöglicht die Kennwortauthentifizierung

Wie gestaltet man eine responsive Website? Vor- und Nachteile von Responsive Webdesign

Beispielcode zum gleichmäßigen Verteilen von Elementen mithilfe des CSS3-Flex-Layouts

Detaillierte Erklärung der vier Arten von MySQL-Verbindungen und Multi-Table-Abfragen

MySQL-Platzhalter (erweiterte SQL-Filterung)

Informationen zur Verarbeitung des adaptiven Layouts (mit Float und negativem Rand)

Verwenden der Outline-Offset-Eigenschaft in CSS zum Implementieren eines Pluszeichens

Fallstudie zu JavaScript-Ereignisschleifen

Grundlegende Referenztypen der erweiterten JavaScript-Programmierung

Detaillierte Erklärung der Tastaturereignisse von Vue

Lösung für Ubuntu, das keine Verbindung zum Internet herstellen kann

Zusammenfassung der Kompatibilitätsprobleme beim Flex-Layout

Verwenden Sie reines CSS, um einen Scroll-Schatteneffekt zu erzielen

Lösung für das Timeout-Problem bei der Installation von Docker-Compose mit PIP