Heim > Artikel > Web-Frontend > Eine kurze Diskussion zum Anzeigemodus von CSS-Elementen
Eine kurze Diskussion zum Anzeigemodus von CSS-Elementen
- 青灯夜游nach vorne
- 2020-12-29 09:28:241743Durchsuche
Empfohlen: CSS-Video-Tutorial
In CSS werden verschiedene Element-Tags je nach Elementanzeigemodus in zwei Kategorien unterteilt: Inline-Elemente (Inline-Ebene) und Elemente auf Blockebene (Block-Ebene) .
1. Lassen Sie uns zunächst vorstellen, was Inline-Elemente und was Block-Level-Elemente sind.
1.1. Inline-Elemente sind Elemente, die keine eigene Zeile belegen, wie zum Beispiel: span buis strong em ins del usw.;
1.2. Elemente auf Blockebene, die selbst eine Zeile belegen. wie zum Beispiel: p p h ul ol dl li dt dd Warten.
2. Was sind die Unterschiede zwischen Inline-Elementen und Block-Level-Elementen?
2.1, Inline-Elemente belegen nicht eine Zeile, aber Elemente auf Blockebene belegen eine Zeile;
2.2, Inline-Elemente können keine Breite und Höhe festlegen und ihre Breite und Höhe ändern sich, wenn sich der Text ändert. Elemente auf Blockebene können die Breite und Höhe festlegen.
Wenn Breite und Höhe nicht festgelegt sind, haben sie standardmäßig die gleiche Breite wie das übergeordnete Element Geben Sie dem Inline-Element
span und dem Block-Level-Element p an. Legen Sie Stile fest, um den Unterschied zwischen Inline-Elementen und Block-Level-Elementen anzuzeigen: <style>
span{
height: 200px;
width: 300px;
background-color: red;
font-size: 40px;
}
.father{
width: 300px;
height: 300px;
background-color: green;
margin: 100px auto;
}
.son{
background-color: blue;
}
</style>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS元素的显示模式</title>
</head>
<body>
<span>我是span</span>
<div>
我是father
<div>我是son</div>
</div>
</body>
</html>
3, denn manchmal müssen wir nicht nur die Breite und Höhe festlegen des Elements, aber hoffen Sie auch, dass das Element keine Zeile einnimmt, dann werden häufig Inline-Blockelemente wie //
4. Wie konvertiere ich den Anzeigemodus von CSS-Elementen? inline -block
(Inline-Blockebene) 4.3, das folgende Beispiel besteht darin, den Anzeigemodus vonspan in Blockebene zu konvertieren, das Anzeigeattribut von p
in Inline-Blockebene zu konvertieren und den Anzeigemodus vonzu konvertieren img zur Blockstufe
<style>
/*将span转换为块级元素--*/
*{
margin: 0;
padding: 0;
}
span{
display: block;
background-color: red;
width: 400px;
height: 400px;
}
/*将div转换为行内块级元素*/
div{
display: inline-block;
background-color: green;
width: 300px;
height: 300px;
}
/*将img转换为块级元素*/
img{
display: block;
width: 200px;
}
</style>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>CSS元素的显示模式</title> </head> <body> <span>我是span</span> <div>我是div</div> <img src="https://images.cnblogs.com/cnblogs_com/TomHe789/1652521/o_200222073220ctl.jpg"> </body> </html>Weitere Programmierkenntnisse finden Sie unter: Programmierunterricht! !
Das obige ist der detaillierte Inhalt vonEine kurze Diskussion zum Anzeigemodus von CSS-Elementen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!