Welche Anzeigemodi gibt es für HTML-Tags auf Blockebene, Inline-Tags und Inline-Block-Tags?

Nachdem die Vorschau ausgeführt wurde, kann p den Text horizontal zentrieren, die Schriftart jedoch nicht

Dann hängt das obige Problem mit der Anzeige in HTML zusammen. Es geht um den Modus:

Merkmale des Anzeigemodus:

sind hauptsächlich in zwei Kategorien unterteilt:

Elemente auf Blockebene : Belegen Sie eine Zeile und wirken Sie sich auf die Breiten- und Höhenattributwerte aus. Wenn keine Breite angegeben ist, werden Elemente auf Blockebene standardmäßig auf die Breite des Browsers eingestellt, d. h. auf die Breite von

: In einer Zeile können mehrere Tags vorhanden sein. Die Attributwerte „Breite“ und „Höhe“ werden nicht wirksam und werden vom Inhalt „Breite“ und „Höhe“ vollständig unterstützt.

Es gibt auch einen Anzeigemodus, der die Vorteile der beiden Modi kombiniert:

Inline-Blockelement: Die kombinierten Vorteile auf Inline- und Blockebene können sich nicht nur auf das Breiten- und Höhenattribut auswirken Werte, aber auch mehr Jedes Tag wird in einer Zeile angezeigt;

Der Anzeigemodus in HTML ist in Blockebene und Inline unterteilt. Häufig verwendete Blockebenen sind: p, p, h1 ~ h6, ul, li , dl, dt, dd.. Zu den häufig verwendeten Inline-Elementen gehören: span, font, b, u, i, strong, em, a, img, input, wobei img und input Inline-Blockelemente sind.

Dann werden einige Schüler denken: Kann ich die Breite und Höhe der Spanne oder Schriftart nicht steuern? Okay, also lassen wir dieses Mal Floating und Positionierung beiseite und verwenden einfach das Attribut display, um sie ineinander umzuwandeln:

1、块级标签转换为行内标签：display:inline;
2、行内标签转换为块级标签：display:block;
3、转换为行内块标签：display：inline-block;

Geben Sie einfach das entsprechende an Die Beschriftung verwendet das Anzeigeattribut und übernimmt den entsprechenden Wert, um die Anzeigemodi ineinander umzuwandeln.

Ich habe bereits gesagt, ob das Text-Alignment-Attribut wirksam ist. Der Grund dafür ist, dass, wenn das Block-Level-Tag keine Breite angibt, das Block-Level-Element standardmäßig die Breite des Browsers verwendet ist 100 % breit. Dann wird die Zentrierung in der Breite von % wirksam, aber die Breite des Inline-Elements wird vollständig durch den Inhalt gestreckt, sodass die Breite der Breite des Inhalts entspricht:

Die Blockebene ist also in der Mitte der Box zentriert, aber da die Breite des Inline-Elements der Breite des Inhalts entspricht und kein Platz zum Zentrieren vorhanden ist, hat text-align:center; ist anders, wenn die Schriftart auf Blockebene konvertiert wird:

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

Ebenso kann der Text nicht in der Mitte angezeigt werden, wenn die Blockebene auf Inline konvertiert wird.

Da Inline-Elemente als Tags mit Texteigenschaften betrachtet werden, können die Inline-Tags auf Blockebene als Texteigenschaften betrachtet werden . -align:center;, die darin enthaltenen Inline-Tags werden horizontal in den Tags auf Blockebene zentriert, z. B. Text:

ohne text-align:center;:

p{ padding:5px;background:green; color:red;}    
font{ background:yellow;}    
<p>    
    <font>我是行内标签font</font> <font>我是行内标签font</font>    
</p>

Nach dem Lesen hinzugefügt text-align:center;

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

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie diese Fälle gelesen haben. Für weitere spannende Inhalte achten Sie bitte auf andere verwandte Artikel auf der chinesischen PHP-Website!

Verwandte Lektüre:

Grundkenntnisse in HTML, detaillierte Einführung in die durch Hyperlinks festgelegten Stile

Grundkenntnisse in HTML .Detaillierte Einführung in CSS-Stylesheets und Stilattribute

So verwenden Sie das href-Attribut des HTMLa-Tags, um relative Pfade und absolute Pfade anzugeben

Das obige ist der detaillierte Inhalt vonWelche Anzeigemodi gibt es für HTML-Tags auf Blockebene, Inline-Tags und Inline-Block-Tags?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!