suchen

Heim  >  Artikel  >  Web-Frontend  >  Was ist der Unterschied und die Verbindung zwischen Inline-Elementen und Elementen auf Blockebene in HTML?

Was ist der Unterschied und die Verbindung zwischen Inline-Elementen und Elementen auf Blockebene in HTML?

青灯夜游
青灯夜游Original
2022-01-21 16:43:454159Durchsuche

Unterschiede: 1. Elemente auf Blockebene werden in einer exklusiven Zeile angezeigt, benachbarte Inline-Elemente können jedoch nicht in einer Zeile angezeigt werden. 2. Elemente auf Blockebene können die Breite und Höhe festlegen, Inline-Elemente jedoch kann nicht. Kontakt: Elemente auf Blockebene können mit dem Stil „display:inline“ in Inline-Elemente umgewandelt werden, und Inline-Elemente können mit dem Stil „display:block“ in Elemente auf Blockebene umgewandelt werden.

Was ist der Unterschied und die Verbindung zwischen Inline-Elementen und Elementen auf Blockebene in HTML?

Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer. Der Unterschied zwischen Inline-Elementen und Blockebenenelementen in HTML.

Belegt eine Zeile. Standardmäßig füllt seine Breite automatisch die Breite des übergeordneten Elements aus.

Benachbarte Inline-Elemente werden in derselben Zeile angeordnet bis eine Zeile nicht mehr passt. Die Breite ändert sich mit dem Inhalt des Elements. Sie können die Breiten- und Höhenattribute festlegen. Die Breiten- und Höhenattribute sind für Inline-Elemente ungültig Sie können die Rand- und Auffüllattribute festlegen entspricht display:blockDie Verbindung zwischen Inline-Elementen und Elementen auf Blockebene in HTMLBeispiel 2:
Nur Rand links, Rand rechts, Abstand links, Abstand rechts, andere Attribute haben keinen Randeffekt.
entspricht display:inline;
Inline-Elemente und Elemente auf Blockebene kann gegenseitige Konvertierung Elemente auf Blockebene können mit dem Stil „display:inline“ in Inline-Elemente konvertiert werden
Inline-Elemente können mit dem Stil „display:block“ in Elemente auf Blockebene konvertiert werden Beispiel 1: 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style>
			div{
				background-color: pink;
			}
			.box{
				display: inline;	/* 块级元素转为内联元素 */
			}
		</style>
	</head>

	<body>
		<div>块级元素1</div>
		<div class="box">块级元素2</div>
		<div class="box">块级元素3</div>
	</body>

</html>
 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style>
			span{
				background-color: pink;
			}
			.box{
				display: block;	/*内联元素 转为块级元素 */
			}
		</style>
	</head>

	<body>
		<span>内联元素1</span>
		<span class="box">内联元素2</span>
		<span class="box">内联元素3</span>
	</body>

</html>
 Verwandte Empfehlungen: „HTML-Video-Tutorial“

Das obige ist der detaillierte Inhalt vonWas ist der Unterschied und die Verbindung zwischen Inline-Elementen und Elementen auf Blockebene in HTML?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

html5 css3 html display margin padding
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
Vorheriger Artikel：Wohin mit dem HTML-Stil?Nächster Artikel：Wohin mit dem HTML-Stil?

In Verbindung stehende Artikel

Mehr sehen