Eine Analyse von Div+Float, einem sehr wichtigen Konzept im Website-Design
|
Beim Erstellen einer Website treten immer wieder Probleme mit HTML und CSS auf. Öffnen Sie die Homepage der Website https://www.jb51.net und sehen Sie sich den Quellcode an. Der Bildschirm ist voller HTML-Tags mit nicht weniger als Dutzenden von Divs. Es gibt zwei Arten von Elementen in HTML: Inline-Elemente (Inline-Elemente) und Blockelemente. Wie verstehst du sie? Inline-Elemente sind Elemente, die nicht umbrochen werden und deren Größe sich anpassen kann. Beispielsweise ein Bild-Schriftbereich. Wenn wir eine Website erstellen, ist der Textinhalt darin ein Inline-Element. Blockelemente sind Elemente, die unabhängig von Inhalt, Breite oder Höhe in die nächste Zeile umbrochen werden, z. B. div p li, die im Allgemeinen im Website-Layout verwendet werden. Der Wechsel zwischen Inline-Elementen und Block-Elementen erfolgt über die beiden CSS-Eigenschaften display: inline block. Verwenden Sie für Inline-Elemente, die Blockelemente enthalten, display:inline-block; „inline“ wird nur verwendet, wenn es Inline-Elemente enthält. Inline-Elemente können Inline-Elemente enthalten, sollten aber möglichst keine Blockelemente enthalten. Inline-Elemente und Blockelemente können in Blockelementen verschachtelt werden. Floating bedeutet auf einer Website, dass man zum Rand des übergeordneten Elements oder zum Rand des vorherigen Floating-Elements driftet. Floating ist sehr nützlich, wenn man ul li zum Erstellen eines Menüs verwendet, und es kann auch verwendet werden, wenn man div zum Erstellen eines Menüs verwendet. schweben:rechts; Durch Rechtsschweben kann die schwebende Box ihre ursprüngliche Position verlassen. Die folgenden Schwebungen folgen dicht dahinter und schweben bis zum rechten Rand des übergeordneten Elements, um dort anzuhalten. Am besten verwenden wir Schwebungen, um Website-Menüs zu erstellen. Am besten ist es, wenn eine Gruppe von Menüs alle schwebt oder überhaupt nicht schwebt. Wenn sich in der Mitte ein Menü befindet, das nicht schwebt, tritt ein seltsamer Anzeigeeffekt auf. Wenn der Platz nicht groß genug ist, kann es sich nach unten anpassen. Lassen Sie das übergeordnete Element, bis es gefüllt ist. schweben: links; Float Left und Right sind eigentlich gleich, außer dass eines nach links und das andere nach rechts schwebt. Sie schweben bis zum übergeordneten Rand oder dem vorherigen schwebenden Block. Wenn auf Ihrer Website eines der Divs in einem Paar höher ist als die anderen Divs, bleibt das zweite schwebende Div dahinter hängen, bis genügend Platz vorhanden ist. Bei Inline-Elementen wird, wenn sie schweben, der Stil auf Blockelemente gesetzt und die Breite und Höhe können festgelegt werden. Andernfalls sind diese beiden Attribute ungültig. Obwohl es sich jedoch um ein Blockelement handelt, gibt es die Position auf der rechten Seite der Zeile auf und kann andere Inhalte anzeigen. Beispielsweise basiert das Textpaketbild in vielen Website-Layouts auf diesem Prinzip /// Schweben löschen. Damit wird der Schwebeeffekt gelöscht. Der Schlüssel zum Schweben besteht darin, Platz zu schaffen und dem vorherigen Schweben schnell zu folgen. |
<<: Implementierung des CSS-Quellcodes für herzförmige Ladeanimationen
>>: Detaillierte Erläuterung mehrerer Beispiele für Insert- und Batch-Anweisungen in MySQL
Artikel empfehlen
Implementierung von Check Constraints in MySQL 8.0
Hallo zusammen, ich bin Tony, ein Lehrer, der nur...
Analyse und Lösung des durch Chrome 73 verursachten Flex-Layout-Zusammenbruchs
Phänomen Es gibt mehrere verschachtelte Flex-Stru...
Sammlung von MySQL-Fuzzy-Abfrageanweisungen
SQL-Fuzzy-Abfrageanweisung Die allgemeine Fuzzy-A...
Python 3.7-Installationstutorial für MacBook
Der detaillierte Prozess der Installation von Pyt...
So installieren Sie den Xrdp-Server (Remote Desktop) unter Ubuntu 20.04
Xrdp ist eine Open-Source-Implementierung des Rem...
So aktivieren Sie die MySQL-Remoteverbindung auf einem Linux-Server
Vorwort Lernen Sie MySQL, um frühere Nicht-MK-Dat...
Verbesserung der Wirkung von Hyperlinks im Webdesign und in der Produktion
Hyperlinks ermöglichen es Benutzern, sofort von ei...
So fügen Sie Docker ein Zertifikat hinzu
1. Upgrade-Vorgang: sudo apt-get update Probleme ...
Grafisches Tutorial zur Installation und Konfiguration von MySQL 8.0.12
Notieren Sie die Installations- und Konfiguration...
Detaillierte Erklärung der Funktion und Verwendung der DOCTYPE-Deklaration
1. Browser-Rendering-Modus und Doctype Einige Web...
Dieser Artikel zeigt Ihnen, wie Sie mit CSS-Kombinationsselektoren spielen
CSS-Kombinationsselektoren umfassen verschiedene ...
Galeriefunktion durch natives Js implementiert
Inhaltsverzeichnis Der erste Der Zweite Native Js...
Analyse und Lösung der Ursache für den Verlust des Webseitenstils durch das automatische Ausfüllen von Formularen durch den Browser
Vom Backend zum Frontend: was für eine Tragödie. A...
So verwenden Sie Node zum Implementieren des statischen Datei-Cachings
Inhaltsverzeichnis Cache Klassifizierung des Cach...
Detaillierte Erklärung zur Verwendung des Split-Befehls zum Teilen von Linux-Dateien
Mithilfe einiger einfacher Linux-Befehle können S...