Detaillierte Erklärung der Anzeigemodi in CSS-Tags

Beschriftungsanzeigemodus (wichtig)

Div- und Span-Tags

1. Die Stile sind genau gleich, aber die Beschriftungen sind unterschiedlich und die angezeigten Ergebnisse sind völlig unterschiedlich

2. Jedes Div belegt eine Zeile, und mehrere Bereiche werden in einer Zeile angeordnet

1. Blockelemente

Funktionen: Die Standardbreite beträgt 100 %, die Standardhöhe ist 0, die Breite und Höhe können eingestellt werden, es übernimmt die Breite des übergeordneten Elements und wird in Zeilenumbrüchen angezeigt – div ul li ph

Schematische Darstellung

Zusammenfassung: Blockelemente können Breiten- und Höhenattribute hinzufügen und eine einzelne Zeile belegen

2. Zeilenelemente

Funktionen: Die Standardbreite und -höhe sind beide 0, Breite und Höhe können nicht eingestellt werden, eine Zeilenanzeige ---- span biua

Schematische Darstellung

Zusammenfassung: Unempfindlich gegenüber Breite und Höhe, kann nicht eine einzelne Zeile einnehmen

3. Blockelemente innerhalb der Zeile

Funktionen: Es können nur Breite und Höhe festgelegt werden, die Anzeige kann nicht umbrochen werden – Bildeingabe

Schematische Darstellung

Lernen Sie noch einen Trick: Generell sind Blockelemente in einer Zeile auch Inline-Elemente. Einige Operationen an Inline-Elementen können auch an Blockelementen in einer Zeile ausgeführt werden, zum Beispiel: text-align:center;line-height:1000px;

4. Modusumwandlung

Syntax: display:值

Wert: Block wird zu einem Blockelement, Inline wird zu einem Zeilenelement, Inline-Block wird zu einem Blockelement innerhalb der Zeile, None versteckt das Element

Lernen Sie noch einen Trick: Nachdem Sie dieses Attribut zum Ausblenden des Elements verwendet haben, nimmt es keinen Platz auf der Seite ein

Kleiner Fall: Die Herstellung einer einfachen Navigation