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.
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.
| 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>Nach dem Login kopieren |
<!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>Nach dem Login kopieren |
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!
