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
Artikel empfehlen
Zusammenfassung mehrerer häufig verwendeter CentOS7-Images basierend auf Docker
Inhaltsverzeichnis 1 Docker installieren 2 Konfig...
Vergleichstabelle für HTML-Sondersymbole auf Webseiten
Sondersymbole Benannte Entitäten Dezimalkodierung...
So ändern Sie die Größe von Partitionen in CentOS7
Gestern habe ich jemandem bei der Installation ei...
Docker verwendet Busybox, um ein Basis-Image zu erstellen
Die erste Zeile eines Docker-Images beginnt mit e...
Detaillierte Erläuterung des Nginx-Forward-Proxys und des Reverse-Proxys
Inhaltsverzeichnis Weiterleitungsproxy Nginx-Reve...
Ein Beispiel für die Installation von MySQL unter Linux und die Konfiguration des externen Netzwerkzugriffs
Konfigurationsschritte 1. Überprüfen Sie, ob DNS ...
Häufige Verwendung von Hooks in React
Inhaltsverzeichnis 1. Was ist ein Hook? 2. Warum ...
Ein ausführliches Tutorial zur Master-Slave-Replikation und Lese-/Schreibtrennung der MySQL-Datenbank
Inhaltsverzeichnis Vorwort 1. MySQL Master-Slave-...
Eine gründliche Analyse der HTML-Sonderzeichen
Eine gründliche Analyse von HTML (14) Sonderzeich...
Lösungen für Dateien/Ordner, die unter Linux nicht gelöscht werden können
Vorwort Kürzlich wurde unser Server von Hackern a...
CSS-Leistungsoptimierung - detaillierte Erklärung der Will-Change-Verwendung
will-change teilt dem Browser mit, welche Änderun...
Fallstricke bei der Installation der komprimierten Version von MySQL 5.7.17 unter Windows
Laden Sie zuerst die neueste komprimierte MySQL 5...
Anwendungsbeispiele für React Hooks (6 gängige Hooks)
1. useState: Funktionskomponenten Status geben An...
Win2008 R2 MySQL 5.5 ZIP-Format MySQL-Installation und -Konfiguration
Installation und Konfiguration von MySQL im ZIP-F...
Detaillierte Erläuterung des zeitgesteuerten Protokollschneidens von Nginx
Vorwort Standardmäßig werden Nginx-Protokolle in ...