Anzeigemodus von Inline-Tags in HTML-Tags auf Blockebene

Wie viel wissen Sie über den Anzeigemodus von Tags in HTML? Er ist grob in Tags auf Blockebene und Inline-Tags unterteilt. Wenn Anfänger zum ersten Mal Tags verwenden, werden sie feststellen, dass einige Attribute bei einigen Tags nicht funktionieren, z. B. Breite, Höhe, horizontale Zentrierung usw. Tatsächlich funktioniert die Verwendung dieses Attributs nur bei Tags auf Blockebene. In diesem Artikel erhalten Sie daher eine detaillierte Einführung in den Anzeigemodus von HTML-Tags auf Blockebene und Inline-Tags.

Zum Beispiel gibt es eine Situation, in der die horizontale Zentrierung des p-Tags eine Auswirkung hat, das Hinzufügen eines horizontalen Zentrierungsattributs zur Schriftart jedoch keine Auswirkung hat (wie folgt):

p{ color:red; text-align:center;}
<
BR
>
font{color:red; text-align:center;}

<p>我是块级标签p</p><BR><font>我是行内标签font</font>

Nach dem Ausführen der Vorschau p Der Text kann horizontal zentriert werden, die Schriftart jedoch nicht (wie folgt):

Dann hängt das obige Problem mit dem Anzeigemodus zusammen in HTML:

Eigenschaften der Anzeigemodi:

sind hauptsächlich in zwei Kategorien unterteilt:

Elemente auf Blockebene: belegt eine exklusive Zeile und wirkt sich auf die Breiten- und Höhenattributwerte aus. Wenn keine Breite angegeben ist , die Elemente auf Blockebene werden standardmäßig auf den Browser eingestellt. Die Breite von beträgt 100 % Breite

inline Elemente: kann mehrere Beschriftungen in einer Zeile haben, z Die Attributwerte „Breite“ und „Höhe“ sind nicht wirksam und die Breite und Höhe hängen vollständig vom Inhalt ab!

Es gibt auch einen Anzeigemodus, der die Funktionen beider Modi kombiniert:

Inline-Blockelemente: Kombinierte Inline- und Block-Level-Funktionen, Es kann sich nicht nur auf die Breiten- und Höhenattributwerte auswirken, sondern auch mehrere Beschriftungen in einer Zeile anzeigen.

Die Anzeigemodi in HTML sind in Blockebene und Inline unterteilt, darunter die häufig verwendeten

Blockebene sind: p,p,h1~h6,ul,li,dl,dt,dd... Zu den häufig verwendeten inline gehören: span, font, b, u, i, strong , em, a, img, input, Unter ihnen sind img und input Inline-Blockelemente.

Dann werden einige Schüler denken: Kann ich die Breite und Höhe der Spanne oder Schriftart nicht steuern? Ja, dieses Mal lassen wir Floating und Positionierung beiseite und konvertieren sie über das Anzeigeattribut ineinander:

1. Konvertieren Sie Tags auf Blockebene in Inline-Tags: display:inline;

2. Konvertieren Sie Inline-Tags in Tags auf Blockebene: display:block;

3. Konvertieren Sie in Inline-Block-Tags: display: inline-block;

Verwenden Sie einfach diese Anzeige für die entsprechenden Tags This Das Attribut kann durch Übernahme des entsprechenden Werts die Anzeigemodi ineinander umwandeln.

Ich habe bereits gesagt, ob das Text-Alignment-Attribut wirksam ist, wenn das Blockebenen-Tag

keine Breite angibt , das Blockebenenelement wird dies tun Standardmäßig ist die Breite des Browsers 100 % Breite , dann erfolgt die Zentrierung bei 100 % Breite, aber die Breite von Inline-Elementen wird vollständig durch den Inhalt erweitert, sodass die Breite die Breite ist des Inhalts. Lassen Sie uns einen Hintergrundtest durchführen und sehen:

Die Blockebene ist also in der Mitte der Box zentriert, aber aufgrund der Breite des Inline-Elements ist die Breite des Inhalts, es gibt keinen Platz zum Zentrieren, daher hat text-align:center keine Auswirkung, aber es wird anders sein, wenn die Schriftart auf Blockebene konvertiert wird:

XML/HTML-Code Inhalt in die Zwischenablage kopieren

1. p{ Hintergrund:grün; Farbe:rot; text-align:center;}

2. font{background:green;color:red; text-align:center;display:block;} 

Das Gleiche gilt, wenn es sich um eine Blockebene handelt. Nach der Konvertierung in Inline kann der Text nicht in der Mitte angezeigt werden.

Da in HTML Inline-Elemente als Beschriftungen mit Textmerkmalen betrachtet werden, kann die Blockebene den Text horizontal zentrieren. Dann werden die Inline-Beschriftungen als Textmerkmale betrachtet. align:center;, die darin enthaltenen Inline-Tags werden horizontal in den Tags auf Blockebene zentriert, wie Text:

Ohne text-align:center;:

XML/HTML-CodeInhalt in die Zwischenablage kopieren

p{ padding:5px;background:green; color:red;}    
font{ background:yellow;}

XML/HTML-CodeInhalt in die Zwischenablage kopieren

1. <p>
       <font>我是行内标签font</font> <font>我是行内标签font</font>
   </p>

Text-align :center;after hinzufügen

1. p{ padding:5px;background:green; color:red;text-align:center;}    
   font{ background:yellow;}

这次主要是讲一下html中显示模式的特性，如果本文对您有帮助，记得推荐一下哦！

相关推荐：

css的显示模式display记录笔记

Das obige ist der detaillierte Inhalt vonAnzeigemodus von Inline-Tags in HTML-Tags auf Blockebene. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!