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
Benutzerdefiniertes Auswahlfeld für die Webseite Auswählen
Jeder ist wahrscheinlich mit dem Auswahl-Dropdown...
So verwenden Sie Navicat zum Exportieren und Importieren einer MySQL-Datenbank
MySql ist eine Datenquelle, die wir häufig verwen...
Detaillierte Erläuterung des Zahlungsfunktionscodes des Vue-Projekts
1. Alipay-Methode: Alipay-Methode: Klicken Sie zu...
Erläuterung des MySQL-Multitabellen-Join-Abfragebeispiels
In tatsächlichen Projekten gibt es Beziehungen zw...
Detaillierte Analyse der Kompilierung und Installation von vsFTP 3.0.3
Details zur Sicherheitsanfälligkeit VSFTP ist ein...
Einführung in die reaktive Funktion toRef-Funktion ref-Funktion in Vue3
Inhaltsverzeichnis Reaktive Funktion Verwendung: ...
JavaScript Canvas zeichnet dynamische Drahtgittereffekte
In diesem Artikel wird der spezifische Code des d...
Zusammenfassung zum Erlernen von Docker-Befehlen in einem Artikel
Inhaltsverzeichnis Einführung Spiegel-Repository ...
Installieren Sie JDK8 im RPM-Modus auf CentOS7
Nach der erfolgreichen Installation von CentOS 7 ...
Gespeicherte MySQL-Prozeduren, d. h. eine Zusammenfassung allgemeiner logischer Wissenspunkte
Gespeicherte MySQL-Prozedur 1. Erstellen Sie die ...
Grundlegende Nutzungsdetails zur Vue-Komponentenbildung
Inhaltsverzeichnis 1. Was ist Komponentenbildung?...
JS praktisches objektorientiertes Schlangenspielbeispiel
Inhaltsverzeichnis denken 1. Bild mit dem gierige...
Grafisches Tutorial zur Installations- und Konfigurationsmethode von Mysql5.7.14 (Lösung für Passwortprobleme)
Dieser Artikel enthält hauptsächlich Lösungen für...
CentOS7 verwendet yum zur Installation von MySQL 8.0.12
In diesem Artikel werden die detaillierten Schrit...
Linux verwendet if, um zu bestimmen, ob ein Verzeichnis existiert.
So verwenden Sie „if“ in Linux, um festzustellen,...