Detaillierte Erläuterung von vier Lösungen für schwebende Probleme im CSS-Layout
|
1. Ursache:
Der Effekt, nachdem die Subbox auf Float gesetzt wurde:
Es ist ersichtlich, dass die blaue Box, nachdem sie auf Schweben eingestellt wurde, die Höhe der übergeordneten Box nicht unterstützen kann, da sie außerhalb des Standarddokumentflusses liegt, was dazu führt, dass 2. Lösung:
(1) Stellen Sie die übergeordnete Box auf eine feste Höhe ein
Obwohl das Festlegen einer festen Höhe für die übergeordnete Box unser Problem vorübergehend lösen kann, ist dies nicht flexibel. Wenn sich die Höhenanforderungen der untergeordneten Box in Zukunft ändern (an vielen Stellen auf der Webseite), müssen wir die Höhe der übergeordneten Box manuell ändern. Die spätere Pflege ist nicht einfach. Anwendung: Bereich mit fester Höhe von Boxen in Webseiten, beispielsweise feste Navigationsleisten. Nachteile: unflexibel in der Anwendung und später schwierig zu warten (2) Innenwandmethode Fügen Sie nach dem schwebenden Element ein leeres Blockelement (normalerweise ein Div) hinzu und legen Sie für das Element Der Code lautet wie folgt:
<!DOCTYPE html>
<html>
<Kopf>
<meta charset="utf-8">
<title>Floating-Elemente sind destruktiv</title>
<style type="text/css">
.Vater{
Rand: 1px durchgehend rot;
}
.Kind{
Breite: 200px;
Höhe: 200px;
schweben: links;
Hintergrundfarbe: grün;
}
.clearfix{
klar: beides;
}
</Stil>
</Kopf>
<Text>
<div Klasse="Vater">
<div class="child">Sohn</div>
<div Klasse="clearfix"></div>
</div>
</body>
</html>Anwendung: Es gibt nicht viele Anwendungen auf der Webseite, sie geben nur eine Anleitung zum nächsten Weg, um das Schweben zu beseitigen. Nachteile: Strukturelle Redundanz (3) Methode zur Entfernung von Pseudoelementen Die Innerwall-Methode besteht darin, nach dem Floating-Element ein leeres Blockelement (normalerweise ein Div) hinzuzufügen und Nun, es gibt zufällig einen Selektor in der CSS3-Attributverwendung, der diese Verwendung vollständig erfüllt: den Pseudoelement-Selektor. Es ist wie eine Pseudoklasse, in der Pseudoelemente über zusätzliche Selektoren verfügen, die jedoch statt der Beschreibung eines speziellen Zustands die Formatierung bestimmter Teile eines Elements ermöglichen.
Dies bedeutet, dass am Ende des p-Tag-Elements Stile hinzugefügt werden, was auch der Verwendung der Innenwandmethode entspricht. Der Code lautet wie folgt:
<!DOCTYPE html>
<html>
<Kopf>
<meta charset="utf-8">
<title>Floating-Elemente sind destruktiv</title>
<style type="text/css">
.Vater{
Rand: 1px durchgehend rot;
}
.Kind{
Breite: 200px;
Höhe: 200px;
schweben: links;
Hintergrundfarbe: grün;
}
.cleafix:nach{
Inhalt:'.';
Anzeige: Block;
klar: beides;
Überlauf: versteckt;
Höhe: 0;
}
</Stil>
</Kopf>
<Text>
<div Klasse="Vater Clearfix">
<div class="child">Sohn</div>
</div>
</body>
</html>Wenn Sie den Float in Zukunft löschen müssen, müssen Sie dem Tag nur eine „Clearfix“-Klasse hinzufügen. Das ist sehr praktisch und schnell! Erklärung der Methode zur Entfernung von Pseudoelementen:
.clearfix:nach{
„content:“; bedeutet, dass dem Element .clearfix ein Inhalt hinzugefügt wird und der Inhalt ein Inline-Element ist.
Anzeige: Block; setzt das Element auf ein Blockelement, das den Anforderungen des Innenwandgesetzes entspricht. (an einigen Stellen wird „table“ verwendet, da „table“ auch ein Element auf Blockebene ist)
clear: both; Methode zum Löschen von Floats. Sie müssen overflow: hidden; schreiben. Wenn Sie display:none; verwenden, kann das Element kein Blockelement sein. overflow:hidden; bedeutet ein verstecktes Element, aber das Element nimmt Platz ein; während display:none; keinen Platz einnimmt.
Höhe: 0;
}Hier ist der Unterschied zwischen :after (Pseudoklasse) und ::after (Pseudoelement) Ähnlichkeiten
Unterschiede
Beachten
(4) Überlauf: versteckt Die CSS-Eigenschaft „Overflow“ definiert, was zu tun ist, wenn der Inhalt eines Elements zu groß ist, um in das Feld zu passen. Es ist eine Abkürzungseigenschaft für overflow-x und overflow-y.
Die Overflow-Eigenschaft kann nicht nur die oben genannten Effekte erzielen, sondern auch, wenn ein Element mit den Eigenschaften overflow:hidden|auto|scroll festgelegt ist, wird ein BFC-Bereich gebildet, den wir BFC ist nur eine Regel. Dies ist wichtig für die schwebende Positionierung. Die Float-Positionierung und das Löschen von Floats gelten nur für Elemente im selben BFC. Das Floaten wirkt sich nicht auf das Layout von Elementen in anderen BFCs aus, während das Löschen von Floats nur die Floats von Elementen davor im selben BFC löschen kann.
Vorteile: prägnanter Code Nachteile: Bei zunehmendem Inhalt kann es leicht dazu kommen, dass der Inhalt aufgrund eines Fehlers beim automatischen Zeilenumbruch ausgeblendet wird und die überlaufenden Elemente nicht angezeigt werden können. Zusammenfassung: Solange wir zulassen, dass die übergeordnete Box den Bereich des BFC bildet, wird der Einfluss schwebender Elemente in diesem Bereich automatisch beseitigt. Die folgenden Bereiche bilden den BFC-Bereich:
Damit ist dieser Artikel über vier Lösungen für Floating-Probleme im CSS-Layout abgeschlossen. Weitere relevante Inhalte zum Floating im CSS-Layout finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen! |
<<: Überblick und Anwendung von Positionsattributen (absolut|relativ|statisch|fest) in CSS
Artikel empfehlen
Ein Beispiel für die dynamische Implementierung verschiedener Datenstile in einer Spalte der el-Tabelle des Elements ui
Problembeschreibung Im Rahmen der Ele.me-Benutzer...
Detaillierte Erläuterung des Implementierungsprinzips von ACID-Transaktionen in MySQL
Einführung Beginnen wir wie immer mit einer Szene...
Virtuelle Maschine klonen Linux Centos6.5 System Netzwerkkarte Konfiguration Grafik-Tutorial
Als Neuling, der gerade mit dem Linux-System in K...
So verwenden Sie die Baidu Map API im Vue-Projekt
Inhaltsverzeichnis 1. Registrieren Sie ein Konto ...
js, um einen 3D-Karusselleffekt zu erzielen
In diesem Artikel wird der spezifische Code zur I...
Detaillierte Erklärung der Beziehung zwischen React und Redux
Inhaltsverzeichnis 1. Die Beziehung zwischen Redu...
Deaktivieren Sie die automatische Vervollständigung in HTML, damit der Verlauf nicht angezeigt wird
Das Eingabefeld zeigt beim Eingeben von Inhalten i...
CSS setzt Overflow, um die Bildlaufleiste auszublenden und gleichzeitig das Scrollen zu ermöglichen
CSS setzt Overflow so, dass die Bildlaufleiste au...
Ausführliche Erklärung der Iteratoren in ECMAScript
Inhaltsverzeichnis Vorwort Frühere Iterationen It...
Detailliertes Tutorial zur Offline-Installation von MySQL unter CentOS7
1. Löschen Sie die ursprüngliche MariaDB, sonst k...
So prüfen Sie, ob eine Tabelle in MySQL vorhanden ist, und löschen sie dann stapelweise
1. Ich habe lange im Internet gesucht, konnte abe...
In der MySQL-Datenbank werden datetime, bigint und timestamp zur Darstellung der Zeitauswahl verwendet. Welches davon ist für die Zeitspeicherung am effizientesten?
Inhaltsverzeichnis # Nachbereitung der Daten # SQ...
Tutorial zur Implementierung von Tabellenladebaumdaten in der Vue-Komponentenbibliothek ElementUI
ElementUI implementiert ein Tutorial zum Laden vo...
Schritte zur vollständigen Deinstallation des Docker-Images
1. docker ps -a zeigt den laufenden Image-Prozess...
Linux Redis-Sentinel-Konfigurationsdetails
herunterladen Download-Adresse: https://redis.io/...