Eine kurze Erläuterung der Anzeigemodi von HTML-Tags (Tags auf Blockebene, Inline-Tags, Inline-Block-Tags)

Während der heutigen Vorlesung habe ich über den Anzeigemodus von Tags in HTML gesprochen, der grob in Tags auf Blockebene und Inline-Tags unterteilt werden kann. 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 dieser Attribute nur bei Tags auf Blockebene. Ich persönlich denke, dass dies auch etwas ist, was Anfänger leicht übersehen können, deshalb habe ich es aufgeschrieben!

Beispielsweise gibt es eine Situation, in der die horizontale Zentrierung des p-Tags funktioniert, das Hinzufügen des horizontalen Zentrierattributs zur Schriftart jedoch nicht (wie unten gezeigt):

Nach dem Ausführen der Vorschau kann p den Text horizontal zentrieren, font jedoch nicht (wie unten gezeigt):

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

Eigenschaften des Anzeigemodus:

Es gibt zwei Hauptkategorien:

Elemente auf Blockebene: Nehmen Sie eine einzelne Zeile ein und die Attributwerte für Breite und Höhe sind wirksam. Wenn keine Breite angegeben ist , wird für Elemente auf Blockebene standardmäßig die Browserbreite verwendet, die 100 % der Breite entspricht .

Inline-Elemente: In einer Zeile können mehrere Tags vorhanden sein. Die Attributwerte width und height sind dabei nicht wirksam. width und height werden vollständig vom Inhalt unterstützt!

Es gibt auch einen Anzeigemodus, der einige der beiden Modi kombiniert:

Inline-Blockelement: Es kombiniert die Vorteile von Inline- und Blockebene. Es kann nicht nur auf Breiten- und Höhenattributwerte wirken, sondern auch mehrere Tags in einer Zeile anzeigen.

In HTML werden Anzeigemodi in Blockebene und Inline unterteilt. Häufig verwendete Elemente auf Blockebene sind: div, p, h1 ~ h6, ul, li, dl, dt, dd ... Häufig verwendete Inline-Elemente sind: span, font, b, u, i, strong, em, a, img, input, wobei img und input Inline-Blockelemente sind.

Dann werden einige Studenten denken: „Kann ich die Breite und Höhe der Spanne oder der Schriftart nicht steuern?“ Ja, also lassen wir dieses Mal das Schweben und Positionieren beiseite und sprechen darüber, wie man sie über die Anzeigeeigenschaft ineinander konvertiert:

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

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

3. In Inline-Block-Tag konvertieren: display: inline-block;

Solange Sie das Anzeigeattribut für das entsprechende Tag verwenden und den entsprechenden Wert übernehmen, können Sie den Anzeigemodus ineinander umwandeln.

Zuvor haben wir darüber gesprochen, ob das Textausrichtungsattribut wirksam ist. Der Grund dafür ist, dass , wenn das Blockebenen-Tag keine Breite angibt , das Blockebenenelement standardmäßig die Breite des Browsers hat, also 100 % Breite , sodass es auf 100 % Breite zentriert wird; die Breite des Inline-Elements wird jedoch vollständig durch den Inhalt erweitert, sodass die Breite die Breite des Inhalts ist. Lassen Sie uns einen Hintergrundtest durchführen, um Folgendes zu sehen:

Die Blockebene wird also in der Mitte des Felds zentriert. Da die Breite des Inline-Elements jedoch der Breite des Inhalts entspricht, ist kein Platz vorhanden, um es zu zentrieren. Daher hat text-align: center; keine Auswirkung. Wird die Schriftart jedoch auf Blockebene konvertiert, sieht das anders aus:

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

Da Inline-Elemente in HTML als Tags mit Texteigenschaften betrachtet werden und Text auf Blockebene horizontal zentriert werden kann, werden Inline-Tags auf Blockebene als Texteigenschaften betrachtet. Wenn text-align: center auf Blockebene verwendet wird, werden die Inline-Tags darin horizontal in den Tags auf Blockebene zentriert, wie Text:

Ohne text-align:center;:

Nach dem Hinzufügen von text-align:center;

Dieses Mal werde ich hauptsächlich über die Eigenschaften des Anzeigemodus in HTML sprechen. Wenn dieser Artikel für Sie hilfreich ist, denken Sie daran, ihn weiterzuempfehlen!

Original-URL: http://www.cnblogs.com/xcaocao/archive/2016/07/07/5649828.html