So verwenden Sie den CSS-Anzeigemodus

Dieses Mal zeige ich Ihnen, wie Sie den CSS-Anzeigemodus verwenden und welche Vorsichtsmaßnahmen für die Verwendung des CSS-Anzeigemodus gelten. Hier ist ein praktischer Fall, werfen wir einen Blick darauf.

1. Tag-Ergänzung div und pan

2. Was ist span?

Funktion: Wird im Allgemeinen verwendet, um einige lokale Informationen auf der Webseite mit CSS zu ändern

3. Was ist der Unterschied zwischen div und span?

3.1.div belegt eine einzelne Zeile, span jedoch nicht eine einzelne Zeile

3.2.div ist ein Container -Level-Tag und span ist ein Tag auf Textebene

4 .Was ist der Unterschied zwischen Tags auf Containerebene und Tags auf Textebene?

Tags auf Containerebene können mit allen verschachtelt werden andere Tags

Tags auf Textebene können nur mit Text/Bildern/Hyperlinks verschachtelt werden

Tags auf Containerebene

Tags auf Textebene

Hinweis:

div h ul ol dl li dt dd ...

Welche Tags auf Textebene und welche auf Containerebene sind, müssen wir uns nicht bewusst merken. In der Unternehmensentwicklung erfolgt die Verschachtelung normalerweise in Divs oder nach Gruppen-Tags

span p buis strong em ins del ...

2. Anzeigemodus von Elementen

In HTML unterteilt HTML alle Tags in zwei Kategorien, nämlich Containerebene und Textebene.

In CSS unterteilt CSS auch Alle Tags in zwei Kategorien einteilen, nämlich Elemente auf Blockebene und Inline-Elemente. 1 Was ist ein Element auf Blockebene und was ist ein Inline-Element? Zeile für sich

Inline-Elemente belegen keine Zeile für sich

Tags auf Containerebene

Tags auf Textebene

Elemente auf Blockebene

div h ul ol dl li dt dd ...

Inline-Elemente (alle Textelemente außer p sind Inline-Elemente)

span buis strong em ins del

span p buis stong em ins del ...

2. Was ist der Unterschied zwischen Elementen auf Blockebene? und Inline-Elemente?

p div h ul ol dl li dt dd

2.1 Elemente auf Blockebene

belegen eine Zeile

Wenn die Breite nicht festgelegt ist, ist sie standardmäßig dieselbe Breite wie das übergeordnete Element

Wenn die Breite und Wenn die Höhe festgelegt ist, wird sie als festgelegt angezeigt

2.2 Inline-Elemente

belegen keine exklusive Zeile

Wenn die Breite nicht festgelegt ist, ist die Standardbreite dieselbe wie der Inhalt
Inline-Elemente können die Breite und Höhe nicht festlegen

2.3 Inline-Elemente auf Blockebene

Damit die Elemente beides können, ohne eine exklusive Zeile zu belegen, können Sie dies auch tun Legen Sie die Breite und Höhe fest, dann gibt es Inline-Elemente auf Blockebene (z. B. img-Tag)

Konvertierung des Anzeigemodus mit drei CSS-Elementen

1 .So geht's Den Anzeigemodus von CSS-Elementen konvertieren?

Anzeigeattribut des Elements festlegen

2. Block-Anzeigewertinline inline

inline- Block-Inline-Block-Ebene

3. Tastenkombinationen

di display: inline;

db display: block;

dib display: inline-block;

believe Nachdem Sie den Fall in diesem Artikel gelesen haben, beherrschen Sie die Methode. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

So laden Sie HTMLString in iOS webView

Ein paar kleine Übungen zu regulären Ausdrücken

Das obige ist der detaillierte Inhalt vonSo verwenden Sie den CSS-Anzeigemodus. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!