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
Swiper+echarts realisiert den Links- und Rechts-Scrolleffekt mehrerer Dashboards
In diesem Artikel wird der spezifische Code von S...
Datenbankprobleme und Fallstricke bei der Verbindung zu Cloud-Servern mit Navicat Premium15
Bei Verwendung eines Cloud-Servers stellen wir ma...
Kompatibilitätsprobleme beim Einfügen von Audiodateien in HTML und beim Abspielen in Browsern
Lassen Sie uns über einige Probleme sprechen, die ...
Detaillierte Beispiele zur Verwendung der JavaScript-Ereignisdelegierung (Proxy)
Inhaltsverzeichnis Einführung Beispiel: Ereignisd...
So konfigurieren Sie den Redis-Sentinel-Modus in Docker (auf mehreren Servern)
Inhaltsverzeichnis Vorwort Zustand Docker install...
js generiert dynamisch Tabellen (Knotenoperationen)
In diesem Artikelbeispiel wird der spezifische Co...
CSS 3.0 Text Hover Jump Spezialeffekte-Code
Hier ist ein mit CSS 3.0 implementierter Textschw...
Implementieren eines Webplayers mit JavaScript
Heute zeige ich Ihnen, wie Sie mit JavaScript ein...
Eine kurze Erläuterung zu schreibgeschützten und deaktivierten Attributen in Formularen
Schreibgeschützte und deaktivierte Attribute in F...
Zeigen Sie die Festplatten-E/A in Linux an und finden Sie die Prozesse heraus, die viel Lese- und Schreib-E/A beanspruchen
Hintergrund - Online Alert Ein Online-Server hat ...
So erstellen Sie Komponenten in React
Inhaltsverzeichnis Vorwort Komponenteneinführung ...
Lösung für MySQL-Fehler beim Ändern des SQL-Modus
Inhaltsverzeichnis Ein Mord verursacht durch ERR ...
Detaillierte Erläuterung der benutzerdefinierten Anweisungen für die Vue.js-Direktive
Anpassen eines Demo-Befehls Die Syntax der benutz...
HTML implementiert problemlos abgerundete Rechtecke
Frage: Wie erreiche ich mit Div+CSS und Positioni...
Über Front-End JavaScript ES6 Details
Inhaltsverzeichnis 1. Einleitung 1.1 Babel-Transc...