So konvertieren Sie zwischen CSS-Elementen auf Zeilenebene und Elementen auf Blockebene

In CSS können Sie das Anzeigeattribut verwenden, um Elemente auf Zeilenebene und Elemente auf Blockebene zu konvertieren. Legen Sie den Stil „display:block;“ für Elemente auf Blockebene fest. „ für Elemente auf Blockebene. inline;“ Der Stil kann in Elemente auf Zeilenebene konvertiert werden.

Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.

Inline-Elemente

span, i, a, img usw. Bei der Anzeige innerhalb einer Zeile handelt es sich bei Elementen, deren Breite und Höhe nicht einstellbar sind, im Allgemeinen um Inline-Elemente.

Elemente auf Blockebene

div, h1, p, li usw. Ein Element, das eine eigene Zeile einnimmt und Breite und Höhe festlegen kann, ist ein Element auf Blockebene.

Elemente auf Blockebene in Inline-Elemente konvertieren

Setzen Sie display: inline; in Elementen auf Blockebene ein, um Elemente auf Blockebene in Inline-Elemente umzuwandeln. display：inline;就可以让块级元素变成行内元素。

行内元素转换成块级元素

在行内元素中设置display:block;就可以让行内元素变成块级元素。

块级元素或行内元素转换成

块级元素或行内元素中设置display：inline-block;Konvertieren Sie Inline-Elemente in Elemente auf Blockebene.

Setzen Sie display:block; in Inline-Elementen ein, um Inline-Elemente in Elemente auf Blockebene umzuwandeln.

Konvertieren Sie Elemente auf Blockebene oder Inline-Elemente in

• Das Festlegen von display: inline-block; in Elementen auf Blockebene oder Inline-Elementen kann Elemente auf Blockebene oder Inline-Elemente in Inline-Block-Elemente umwandeln. Ebenenelemente und können in derselben Zeile angezeigt werden. [Empfohlenes Tutorial:

  CSS-Video-Tutorial

  ]

• CSS-Anzeigeattribut

• Das Anzeigeattribut gibt den Feldtyp an, den das Element generieren soll.

block Dieses Element wird als Element auf Blockebene angezeigt, mit Zeilenumbrüchen vor und nach diesem Element.

Inline-Standard. Dieses Element wird als Inline-Element ohne Zeilenumbrüche vor oder nach dem Element angezeigt. 🎜🎜🎜🎜inline-block Inline-Blockelement. (Neuer Mehrwert in CSS2.1) 🎜🎜🎜🎜Weitere Kenntnisse zum Thema Programmierung finden Sie unter: 🎜Programmiervideo🎜! ! 🎜

Das obige ist der detaillierte Inhalt vonSo konvertieren Sie zwischen CSS-Elementen auf Zeilenebene und Elementen auf Blockebene. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!