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)

>>: Einführung in die MIME-Kodierung (integriert aus Online-Informationen und praktischen Erfahrungen)

Dieser Artikel zeigt Ihnen, wie Sie CSS wie JS-Module importieren

Anzeigemodus von Elementen in CSS

Dieser Artikel zeigt Ihnen, wie Sie CSS wie JS-Module importieren

Implementierung und Optimierung von MySql-Unterabfragen IN

Detailliertes Tutorial zur Installation von InfluxDB in Docker (Leistungstest)

Mysql-Trigger werden in PHP-Projekten zum Sichern, Wiederherstellen und Löschen von Informationen verwendet

Tutorial zum Anzeigen und Ändern von MySQL-Zeichensätzen

Neun erweiterte Methoden zur Deduplizierung von JS-Arrays (erprobt und effektiv)

Eine kurze Analyse, ob die Verwendung von iframe zum Aufrufen einer Seite die Seite zwischenspeichert

So installieren Sie Oracle auf Windows Server 2016

So lässt man in CSS die Höhe eines untergeordneten Divs den verbleibenden Platz des übergeordneten Containers ausfüllen

Natives JS zum Erzielen von Jalousie-Spezialeffekten

Artikel empfehlen

Grafisches Tutorial zur Installation und Konfiguration von MySQL 5.7.17 winx64

So verwenden Sie Javascript zum Erstellen einfacher Algorithmen

Detaillierte Erläuterung des Implementierungsprozesses des Docker-Cross-Host-Container-Kommunikations-Overlays

Prinzipanalyse des UDP-Verbindungsobjekts und Anwendungsbeispiele

Warum node.js nicht für große Projekte geeignet ist

Detailanalyse der MySQL-Berechtigungskontrolle

Detaillierte Erklärung zu MySQL-Phantomlesevorgängen und wie man sie eliminiert

Detaillierte Erläuterung des Svelte-Implementierungsprinzips für eine einfache und unkomplizierte JavaScript-Entwicklung

Docker-Dateispeicherpfad, Befehlsvorgang zum Starten des Containers abrufen

So erhöhen Sie die Ladegeschwindigkeit von HTML-Seiten

Detaillierte Erläuterung der neuen relationalen Datenbankfunktionen in MySQL 8.0

So erstellen Sie PHP7 mit einem benutzerdefinierten Docker-Image

Zusammenfassung zur Verwendung des Ausrufezeichen-Befehls (!) unter Linux

So verwenden Sie html2canvas, um HTML-Code in Bilder umzuwandeln

Eine kurze Diskussion über HTML-Dokumenttypen und -Kodierung