Anzeigemodus von Elementen in CSS
|
In CSS werden Element-Tags entsprechend den unterschiedlichen Elementanzeigemodi in zwei Kategorien unterteilt: Elemente auf Inline-Ebene und Elemente auf Blockebene. 1. Lassen Sie uns zunächst erklären, was Inline-Elemente und was Blockelemente sind. 1.1 Inline-Elemente sind Elemente, die keine einzelne Zeile einnehmen, zum Beispiel: span, buis strong em ins del usw. 1.2, Blockebenenelemente sind Elemente, die eine einzelne Zeile einnehmen, wie z. B. p div h ul ol dl li dt dd usw. 2. Was sind die Unterschiede zwischen Inline-Elementen und Block-Level-Elementen? 2.1. Inline-Elemente belegen keine einzelne Zeile, Block-Level-Elemente belegen jedoch eine einzelne Zeile. 2.2. Die Breite und Höhe von Inline-Elementen kann nicht festgelegt werden. Ihre Breite und Höhe ändern sich, wenn sich der Text ändert. Elemente auf Blockebene können Breite und Höhe festlegen. Wenn Breite und Höhe nicht festgelegt sind, ist die Breite standardmäßig gleich der des übergeordneten Elements und die Höhe 0. 2.3, das folgende Beispiel zeigt den Unterschied zwischen Inline- und Blockebene durch Festlegen von Stilen für Inline-Elemente span und Blockebenenelemente div
<Stil>
Spanne{
Höhe: 200px;
Breite: 300px;
Hintergrundfarbe: rot;
Schriftgröße: 40px;
}
.Vater{
Breite: 300px;
Höhe: 300px;
Hintergrundfarbe: grün;
Rand: 100px automatisch;
}
.Sohn{
Hintergrundfarbe: blau;
}
</Stil>
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<title>Anzeigemodus von CSS-Elementen</title>
</Kopf>
<Text>
<span>Ich bin span</span>
<div Klasse="Vater">
Ich bin Vater
<div class="son">Ich bin Sohn</div>
</div>
</body>
</html>
3. Manchmal müssen wir nicht nur die Breite und Höhe eines Elements festlegen, sondern auch hoffen, dass das Element nicht eine einzelne Zeile einnimmt. In diesem Fall treten Inline-Blockelemente auf. Zu den üblichen Inline-Blockelementen gehören <img>/<input>/<td> usw. 4. Wie ändere ich den Anzeigemodus von CSS-Elementen? 4.1, Legen Sie das Anzeigeattribut des Elements fest 4.2, Anzeigewert: inline (inline), block (Blockebene), inline-block (inline Blockebene) 4.3, das folgende Beispiel konvertiert den Anzeigemodus von span auf Blockebene, konvertiert das Anzeigeattribut von div auf Inline-Blockebene und konvertiert den Anzeigemodus von img auf Blockebene
<Stil>
/*Span in ein Blockelement umwandeln--*/
*{
Rand: 0;
Polsterung: 0;
}
Spanne{
Anzeige: Block;
Hintergrundfarbe: rot;
Breite: 400px;
Höhe: 400px;
}
/*Div in Inline-Element auf Blockebene umwandeln*/
div{
Anzeige: Inline-Block;
Hintergrundfarbe: grün;
Breite: 300px;
Höhe: 300px;
}
/*img in ein Blockelement umwandeln*/
img{
Anzeige: Block;
Breite: 200px;
}
</Stil>
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<title>Anzeigemodus von CSS-Elementen</title>
</Kopf>
<Text>
<span>Ich bin span</span>
<div>Ich bin div</div>
<img src="https://images.cnblogs.com/cnblogs_com/TomHe789/1652521/o_200222073220ctl.jpg">
</body>
</html>
Zusammenfassen Dies ist das Ende dieses Artikels über den Anzeigemodus von Elementen in CSS. Weitere relevante Inhalte zum CSS-Anzeigemodus finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird! |
<<: Beispiel für die Einstellung des HTML-Hyperlink-Stils (vier verschiedene Zustände)
Artikel empfehlen
Zwei Möglichkeiten, das WeChat-Miniprogramm mit Tencent Maps zu verbinden
Ich habe kürzlich ein WeChat-Applet geschrieben u...
Detaillierte Erläuterung der Vue Simple Notepad-Entwicklung
In diesem Artikelbeispiel wird der spezifische Co...
Basierend auf den neuen Funktionen von JavaScript ES: Schlüsselwörter let und const
Inhaltsverzeichnis 1. let-Schlüsselwort 1.1 Grund...
Implementieren eines binären Suchbaums in JavaScript
Die Implementierung des Suchbinärbaums in JavaScr...
Native JS-Implementierung der Lupenkomponente
In diesem Artikelbeispiel wird der spezifische Co...
Keepalived+Nginx+Tomcat-Beispielcode zur Implementierung eines hochverfügbaren Webclusters
Keepalived+Nginx+Tomcat zur Erzielung eines hochv...
mysql drei Tabellen verbunden, um eine Ansicht zu erstellen
Drei Tabellen sind miteinander verbunden. Feld a ...
Lösung für PHP, das nach Abschluss der Nginx-Installation nicht analysiert werden kann
Inhaltsverzeichnis Methode 1 Methode 2 Nach der I...
Natives JS zum Erzielen eines coolen Paging-Effekts
In diesem Artikel wird anhand eines Beispiels ein...
Zusammenfassung der Verzögerungen der MySQL-Slave-Bibliothek „Seconds_Behind_Master“
Inhaltsverzeichnis Zusammenfassung der Verzögerun...
Auch Webdesigner müssen Web-Coding lernen
Oftmals wird nach der Fertigstellung eines Webdes...
Docker-Compose-Installationsmethode für die YML-Dateikonfiguration
Inhaltsverzeichnis 1. Offline-Installation 2. Onl...
Beispielcode zum Ändern des Stils anderer Tags durch Bewegen der Maus mithilfe von CSS
Vorwort: Soweit ich weiß, kann CSS derzeit nur de...
Das neueste, äußerst detaillierte grafische Tutorial zur Installation von Kali Linux auf der virtuellen Maschine VMware
Inhaltsverzeichnis 1. Laden Sie die Systemabbildd...
Detailliertes Verständnis des Plug-In-Mechanismus und der Installationsdetails von Vue
Vorwort: Wenn wir Vue verwenden, verwenden und sc...