Heim  >  Artikel  >  Web-Frontend  >  So konvertieren Sie Blockelemente in andere Elemente in HTML5

So konvertieren Sie Blockelemente in andere Elemente in HTML5

青灯夜游
青灯夜游Original
2022-03-11 16:44:594251Durchsuche

Konvertierungsmethode: 1. Fügen Sie den Stil „display:inline;“ zu Blockelementen hinzu. 2. Fügen Sie „display:inline-block;“ zu Blockelementen hinzu Inline-Blockelement.

So konvertieren Sie Blockelemente in andere Elemente in HTML5

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

Konvertieren Sie Blockelemente in HTML5 in andere Elemente (Inline oder Inline-Block).

Funktionen von Blockelementen:

  • (1) Kann Breite und Höhe identifizieren.

  • (2) Rand und Auffüllung gilt für oben, unten, links und rechts davon

  • Inline-Elementeigenschaften:

  • (1) Das Festlegen der Breite und Höhe ist ungültig.

(2) Das Festlegen des Randes ist nur in der linken und rechten Richtung gültig, nicht in der Aufwärts- und Abwärtsrichtung gültig in der Auf-, Ab-, Links- und Rechtsrichtung, wodurch der Raum erweitert wird

  • (3) Kein automatischer Zeilenumbruch

  • Merkmale von Inline-Blockelementen:

  • (1) Kein automatischer Zeilenumbruch

(2) Kann Breite und Höhe erkennen

  • (3) Die Standardanordnung ist von links nach rechts

  • In HTML5 können Sie das Anzeigeattribut verwenden, um Blockelemente in Inline- oder Inline-Elemente umzuwandeln Blockelemente.

  • display:inline;In Inline-Element konvertieren

display:inline-block;In Inline-Blockelement konvertieren

  • Beispiel: display:inline;转换为行内元素

  • display:inline-block;

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8" />
    		<style>
    			p{
    				background-color: #FFC0CB;
    				height: 50px;
    			}
    		</style>
    	</head>
    	<body>
    		<p>块状元素p</p>
    		<p>块状元素p</p>
    		<p style="display: inline;">块状元素p--转为行内元素</p>
    		<p style="display: inline;">块状元素p--转为行内元素</p>
    		<p>块状元素p</p>
    		<p style="display: inline-block;">块状元素p--转为行内块元素</p>
    		<p style="display: inline-block;">块状元素p--转为行内块元素</p>
    	</body>
    </html>


Es ist ersichtlich, dass Blockelemente und Inline-Blockelemente die Höhe festlegen können, Inline-Elemente jedoch nicht;

【Verwandte Empfehlungen: So konvertieren Sie Blockelemente in andere Elemente in HTML5HTML-Video-Tutorial

,

Web-Frontend

Das obige ist der detaillierte Inhalt vonSo konvertieren Sie Blockelemente in andere Elemente in HTML5. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn