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)

Implementierung eines statischen Website-Layouts im Docker-Container

Artikel

Mehrere Möglichkeiten zur Verwendung von require/import-Schlüsselwörtern zum Importieren lokaler Bilder in einer v-for-Schleife

Artikel

Tutorial zur Verwendung des Frameset-Tags in HTML

Anzeigemodus von Elementen in CSS

Implementierung eines statischen Website-Layouts im Docker-Container

Mehrere Möglichkeiten zur Verwendung von require/import-Schlüsselwörtern zum Importieren lokaler Bilder in einer v-for-Schleife

Tutorial zur Verwendung des Frameset-Tags in HTML

Detaillierte Erläuterung der Nginx-Optimierung in Szenarien mit hoher Parallelität

Mysql verwendet gespeicherte Prozeduren, um schnell Millionen von Datenbeispielcodes hinzuzufügen

Analyse der Prinzipien und Verwendung von Linux-Hardlinks und Softlinks

Detaillierte Erläuterung der MySQL Limit-Leistungsoptimierung und der Paging-Daten-Leistungsoptimierung

Zusammenfassung der MySQL-Fremdschlüsseleinschränkungen und Tabellenbeziehungen

Einfache Analyse von EffectList in React

Analyse des SELECT-Abfrageausdrucks in der MySQL-Datenbank

Artikel empfehlen

Zusammenfassung der mit dem Abfangen von MySQL-Zeichenfolgen verbundenen Funktionen

React realisiert sekundäre Verknüpfung (linke und rechte Verknüpfung)

Grafische Analyse des Speicherorts der MySQL5.7-Konfigurationsdatei in der Windows-Umgebung

CSS-Namenskonventionen (Regeln), die es wert sind, gesammelt zu werden Häufig verwendete CSS-Namensregeln

Detaillierte Erläuterung der Dateisystemformate der EXT-Serie in Linux

Allgemeine Tags in XHTML

Eine kurze Analyse, wie Sie das Root-Passwort in Linux suse11 ändern können, wenn Sie es vergessen haben

JavaScript-Closures erklärt

SQL-Implementierung von LeetCode (182. Doppelte Postfächer)

So ändern Sie das Root-Benutzerkennwort in MySQL 8.0.16, WinX64 und Linux

Zusammenfassung der Überwachung von Tastaturereignissen durch Vue

Detaillierte Erklärung der Bind-Mounts für die Docker-Datenspeicherung

Eine kurze Analyse von MySQL-Verbindungen und -Sammlungen

Grafisches Tutorial zur Installation und Konfiguration der MySQL-Version 8.0.24

Detailliertes Tutorial-Diagramm zur Installation der dekomprimierten Version von MySQL5.7.21