So konvertieren Sie Blockelemente in andere Elemente in HTML5-HTML-Tutorial-php.cn

So konvertieren Sie Blockelemente in andere Elemente in HTML5

青灯夜游

Freigeben： 2022-03-24 17:09:13

Original

4309 Leute haben es durchsucht

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>

Nach dem Login kopieren

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 HTML5 HTML-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!