CSS-Artikel – Methode zur Berechnung der Zeilenhöhe (übergeordnete und untergeordnete Elemente)

Hier sind nur einige Situationen, die meiner Meinung nach anfällig für Unklarheiten sind. Die
HTML-Struktur lautet wie folgt:

<p>
     </p><p>
        测试行高
    </p>

Das übergeordnete Element ist eine Zahl und das untergeordnete Element ist nicht festgelegt

.parent{
     font-size: 12px;
     ine-height: 1;
 }
.child{
    font-size: 16px;
 }

Das übergeordnete Element ist
Das untergeordnete Element ist
Gibt an, dass das untergeordnete Element den numerischen Wert der Anzeigeeinstellung des übergeordneten Elements erbt, der sich auf die eigene Schriftgröße des übergeordneten Elements bezieht

Prozentsatz des übergeordneten Elements , das untergeordnete Element ist nicht festgelegt

.parent{
    font-size: 12px;
    line-height: 100%;
}
.child{
    font-size: 16px;
}

übergeordnetes Element Das übergeordnete Element ist
Das untergeordnete Element ist
, was darauf hinweist, dass das untergeordnete Element die Zeilenhöhe des übergeordneten Elements erbt Das Element wird auf der Grundlage des Prozentsatzes berechnet und hat nichts mit der Schriftgröße des übergeordneten Elements selbst zu tun.

bezogen auf

Für die Fälle 1 und 2 fügen Sie line-height: inherit zum untergeordneten Element hinzu , und leiten Sie die Fälle 3 und 4 mit der gleichen Leistung ab

Hier sind nur einige wenige Personen aufgeführt. Situationen, die leicht verwischt werden können. Die
HTML-Struktur lautet wie folgt:

<p>
     </p><p>
        测试行高
    </p>

Das übergeordnete Element ist eine Zahl und das untergeordnete Element ist nicht festgelegt

.parent{
     font-size: 12px;
     ine-height: 1;
 }
.child{
    font-size: 16px;
 }

Das übergeordnete Element ist
Das untergeordnete Element ist
Gibt an, dass das untergeordnete Element den numerischen Wert der Anzeigeeinstellung des übergeordneten Elements erbt, der sich auf die eigene Schriftgröße des übergeordneten Elements bezieht

Prozentsatz des übergeordneten Elements , das untergeordnete Element ist nicht festgelegt

.parent{
    font-size: 12px;
    line-height: 100%;
}
.child{
    font-size: 16px;
}

Elternelement Wenn das übergeordnete Element
ist, ist das untergeordnete Element
, was darauf hinweist, dass das untergeordnete Element die Zeilenhöhe von erbt Das übergeordnete Element wird anhand des Prozentsatzes berechnet und hat nichts mit der Schriftgröße des übergeordneten Elements selbst zu tun

Mehr CSS-Artikel zur Berechnung der Artikelzeilenhöhe (übergeordnete und untergeordnete Elemente) verwandte Artikel bitte beachten zur chinesischen PHP-Website!