Detaillierte Erklärung des Mindestbreitenwerts von Inline-Blöcken in CSS

Vorwort

Vor kurzem habe ich mir abends etwas Zeit genommen, um das Buch „CSS World“ zu lesen. Dieses Buch ist sehr interessant und hat mir klar gemacht, dass CSS mehr ist als nur ein paar Attributstile. Gestern habe ich gesehen, dass in einem Inline-Blockelement der Inhalt im Element-Tag eine Mindestbreite hat, wenn die Breite auf 0 gesetzt ist. Die Mindestbreite ist für chinesische und englische Zeichen unterschiedlich. Chinesische Zeichen werden durch jedes chinesische Zeichen getrennt und englische Zeichen durch englische Wörter.

Der Anfang des Artikels

Das Buch gibt ein Beispiel für konvex und konkav, erklärt es aber nicht im Detail. Im Folgenden werde ich diesen Code im Detail erklären.

Code-Operation

<Stil>
        .ao ,.tu{
            Anzeige: Inline-Block;
            Breite: 0;
            Schriftgröße: 14px;
            Zeilenhöhe: 18px;
            Rand: 35px;
            Farbe: himmelblau;
        }
        .ao:vorher,
        .tu:vor{
            /* Der Stil außerhalb der Umrandung spielt eine wichtige Rolle, Umrissfarbe/Stil/Breite */
            Umriss: 2px durchgezogen #cd0000;
            /* Gibt die Schriftfamilie eines Elements an*/
            Schriftfamilie: Consolas, Monaco, Monospace;
        }
        .ao:vor{
            Inhalt: „Liebe dich, Liebe“;
        }
        .tu{
            /* Textrichtung von links nach rechts, für umgekehrte Richtung*/
            Regie: rtl;
        }
        .tu:vor{
            Inhalt: „Ich liebe dich“
        }
    </Stil>
</Kopf>
<Text>
    <div>
        <span class="ao">Ich liebe Mutter</span>
        <span class="tu">Ich liebe dich nicht</span>
        <span>Ich liebe dich</span>
    </div>
</body>

Ergebnisse

Code-Interpretation

Um die konkaven und konvexen Effekte anzuzeigen, werden zwei Span-Tags verwendet. Das Span-Tag ist ein Inline-Element. Wenn Sie mit den drei Stilen nicht vertraut sind, erkläre ich sie später im Artikel.

1. Wandeln Sie es zunächst durch Anzeige in ein Inline-Blockelement um. Die Breite wird dann auf 0 gesetzt, damit das Span-Element eine minimale Breite hat.

2. Verwenden Sie vorher ein gemeinsames Pseudoelement für die beiden Pseudoelemente. Unterschiedliche Inhalte der Pseudoelemente haben unterschiedliche Zeilenumbrüche, der äußere Rahmenstil ist rot und der Schriftstil wird angegeben.
Warum müssen wir Pseudoelemente verwenden? Können wir sie nicht direkt ohne Pseudoelemente festlegen? Mit dieser Frage im Hinterkopf versuchte ich es noch einmal und stellte fest, dass ohne Verwendung von Pseudoelementen der Text konkav und konvex angezeigt wurde, der Rahmen jedoch nicht, und der Text sich immer wieder überlappte. Der Grund hierfür ist noch nicht geklärt, gerne können Sie sich das anschauen und mitdiskutieren.

Richtung: rtl; bedeutet, dass die Textrichtung von rechts nach links verläuft und der hervorstehende Teil an der konkaven Öffnung ausgerichtet ist.

3. Das Folgende „Ich liebe Mutter, aber ich liebe dich nicht“ wird nach dem Inhalt des vorherigen Elements entsprechend dem unteren Breitenwert des Inline-Blockelements angezeigt.

Tag-Klassifizierung

Elemente auf Blockebene

<address> definiert die Adresse
<caption> definiert den Tabellentitel
<dd> definiert einen Eintrag in der Definitionsliste
<div> definiert eine Unterteilung oder einen Abschnitt in einem Dokument
<dl> Definitionsliste
<dt> definiert die Elemente in der Liste
<fieldset> definiert ein Frameset
<form> erstellt ein HTML-Formular
<h1> definiert die größte Überschrift
<h2> definiert einen Untertitel
<h3> definiert den Titel
<h4> definiert den Titel
<h5> definiert den Titel
<h6> definiert die kleinste Überschrift
<hr> erstellt eine horizontale Linie
Das <legend>-Element definiert einen Titel für das Fieldset-Element.
Das <li>-Tag definiert ein Listenelement
<noframes> Zeigt Text für Browser, die keine Frames unterstützen, innerhalb eines Frameset-Elements an
<noscript> definiert alternativen Inhalt, wenn das Skript nicht ausgeführt wird
<ol> definiert eine geordnete Liste
<ul> definiert eine ungeordnete Liste
Das Tag <p> definiert einen Absatz
<pre> definiert vorformatierten Text
Das Tag <table> definiert eine HTML-Tabelle
<tbody> Tag-Tabellentext (Text)
<td> Standardzelle in einer Tabelle
<tfoot> definiert den Fußbereich der Tabelle (Fußnote oder Tabellennotiz)
<th> definiert die Überschriftenzelle
Das Tag <thead> definiert die Tabellenüberschrift
<tr> definiert eine Zeile in einer Tabelle

Inline-Elemente

Das <a>-Tag definiert einen Anker
<abbr> steht für eine Abkürzung
<acronym> definiert nur die Initialen eines Akronyms
<b> Fettschrift
<bdo> kann die Standardtextrichtung überschreiben
<big> Große, fette Schrift
<br> Zeilenumbruch
<cite> zitiert die Definition
<code> definiert Computercodetext
<dfn> definiert ein Definitionselement
<em> wird als hervorgehobener Inhalt definiert
<i> Kursiver Texteffekt
<img> bettet ein Bild in eine Webseite ein
<input> Eingabefeld
<kbd> definiert Tastaturtext
Das Tag <label> definiert eine Bezeichnung (Markierung) für das Eingabeelement
<q> definiert ein kurzes Zitat
<samp> definiert Beispieltext
<select> erstellt ein Einzelauswahl- oder Mehrfachauswahlmenü
<small> gibt eine kleine Schriftart wieder
<span> Kombiniert Inline-Elemente in einem Dokument // Dieses Beispiel verwendet span
<strong> Stärkere Betonung
<sub> definiert tiefgestellten Text
<sup> definiert hochgestellten Text
<textarea> Mehrzeiliges Texteingabe-Steuerelement
<tt> Schreibmaschinen- oder Monospace-Texteffekt
<var> definiert eine Variable

Inline-Blockelemente

<button> Schaltfläche
<del> definiert Text, der im Dokument gelöscht wurde
<iframe> erstellt einen Inline-Frame (d. h. einen Inline-Frame), der ein anderes Dokument enthält
Das <ins>-Tag definiert Text, der in das Dokument eingefügt wurde.
<map> Clientseitige Imagemap (d. h. Hotspot)
<Objekt> Objekt
<script> Clientseitiges Skript

Ende des Artikels

Um es in einem Satz zusammenzufassen: Wenn die Breite eines Inline-Blockelements 0 ist, hat der Inhalt innerhalb des Elements einen Mindestbreitenwert. Du kannst es auch gerne mal ausprobieren. Wenn du Fragen hast, hinterlasse uns gerne eine Nachricht im Kommentarbereich und wir lernen gemeinsam.

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.