Verständnis von Haslaylout- und BFC-Parsing

1. haslayout und bfc sind IE-spezifische und Standardattribute.

2. BFC ist ein isolierter, unabhängiger Container auf der Seite. Die untergeordneten Elemente im Container wirken sich nicht auf die Elemente außerhalb aus und umgekehrt.

3. BFC hat 3 Funktionen:

1. Enthält schwebende Elemente,

2. Überschneidungen beim Drehbuchschreiben vermeiden,

3. Verhindern Sie, von schwebenden Elementen verdeckt zu werden

4. Auslösebedingungen:

Float-Wert ungleich None
Überlaufwerte außer sichtbar (versteckt, automatisch, scrollen)
Anzeige (Tabellenzelle, Tabellenüberschrift, Inline-Block, Flex, Inline-Flex)
Der Positionswert ist (absolut, fest)
Das Fieldset-Element

Es ist wichtig zu beachten, dass BFC ein unabhängiger Container ist, der andere Layouts nicht beeinflusst und auch nicht beeinflusst wird. Durch die Verwendung seiner Eigenschaften können Sie Probleme wie das Löschen von Floats und 2-Spalten-Layouts lösen.

Beispiel: 2-spaltiges adaptives Layout

1. Lösen Sie es mit Floating und negativem Rand

2. BFC auslösen und nicht von schwebenden Elementen abgedeckt werden

<<: Implementierung eines CSS-Textschatten-Effekts zur allmählichen Unschärfe

>>: Grundlagen der HTML-Bearbeitung (ein Muss für Anfänger)

Der Unterschied zwischen clientWidth, offsetWidth, scrollWidth in JavaScript

Verständnis von Haslaylout- und BFC-Parsing

Der Unterschied zwischen clientWidth, offsetWidth, scrollWidth in JavaScript

Geplantes Teilen von Skripten für MySQL-Datenbanksicherungen

Implementierung der Deduplizierung von Dateiinhalten sowie von Schnittmengen und Unterschieden in Linux

MySQL 8.0.16 Installations- und Konfigurations-Tutorial unter Windows 10

Zusammenfassung des Betriebs und der Wartung von Linux von grundlegenden bis zu fortgeschrittenen Wissenspunkten

Ein einfaches Beispiel zur Implementierung einer Fuzzy-Abfrage in Vue

Probleme und Erfahrungen bei der Webentwicklung

Informationsübertragung und Funktionsaufrufe zwischen WeChat-Miniprogrammseiten und -Komponenten

Lösung für den nicht funktionierenden Aufruf this.$notify.close() von ElementUI

Beispiel für die Methode „Mysql implementiert Nullwerte zuerst/letzten“

Artikel empfehlen

So verwenden Sie Nginx zur Simulation einer Blue-Green-Bereitstellung

Eine kurze Diskussion über den VUE Uni-App-Lebenszyklus

Ein Beispiel für die vertikale Zentrierung von Unterelementen in Div mithilfe des Flex-Layouts

Schreiben Sie ein Publish-Subscribe-Modell mit JS

Nginx-Inhaltscache und allgemeine Parameterkonfigurationsdetails

Detaillierte Schritte zur vollständigen Deinstallation und Neuinstallation von MySQL unter Windows 10

Einige Vorschläge zur Linux-Systemoptimierung (Kerneloptimierung)

Der DOCTYPE-Modusauswahlmechanismus bekannter Browser

Natives JS zum Implementieren der Seitenleiste zum Teilen

Schritte zum Bereitstellen eines Docker-Projekts in IDEA

Nginx implementiert ein Codebeispiel für die https-Websitekonfiguration

Beschreiben Sie kurz die Replikation der MySQL-Überwachungsgruppe

Detailliertes Tutorial zur Konfigurationsmethode der kostenlosen Installationsversion von Mysql 5.7.19 (64-Bit)

Eine kurze Diskussion über mehrere aufgetretene Browserkompatibilitätsprobleme

Vue implementiert eine einfache Timer-Komponente