CSS verwendet die Zeilenhöhenmethode ohne Einheit

Dieser Artikel stellt hauptsächlich die Methode zur Verwendung von Zeilenhöhe ohne Einheiten in CSS vor. Jetzt kann ich ihn mit Ihnen teilen.

Zeilenhöhe ist es kann vererbt werden, sodass untergeordnete Elemente die Zeilenhöhe nicht wiederholt definieren müssen. Normalerweise bringen wir am Ende auch Einheiten an (z. B.: line-height:22px; oder line-height:1.4em;), aber der Ort, an dem die line-height Probleme verursacht, ist auch die Vererbung und die später hinzugefügten Einheiten

Um eine vertikale Zentrierung einer einzelnen Textzeile zu erreichen, geben wir der Zeilenhöhe manchmal einen festen Wert, der mit der Höhe übereinstimmt, manchmal, um den Zeilenabstand eines bestimmten Textabsatzes anzupassen Erwägen Sie normalerweise die Verwendung von Prozentsätzen oder relativen Größenangaben. Vielleicht ist es eine Gewohnheit, deshalb sind wir alle daran gewöhnt, Zeilenhöheneinheiten zu haben. In diesen Fällen müssen wir die Vererbung der Zeilenhöhe nicht berücksichtigen und werden keine Probleme feststellen. Wenn wir die Vererbung der Zeilenhöhe verwenden, werden wir natürlich das Problem finden.
Zum Beispiel der folgende Code:

CSS:

<style> 
.line-height-test { width: 200px; line-height: 1.4em; font-size: 12px; } 
.line-height-test span { font-size: 30px; font-weight: bold; } 
</style>

HTML:

<p class="line-height-test"> 
<span>白培铭先生于1960年出生于中国台湾，毕业于中国台湾省清华大学核物理系，</span> 
之后留学于美国加州大学伯克利分校和密西根大学，获得双硕士学位。在工作之后，凭着对营销领域的浓厚兴趣，他又考入密执安大学深造。 
</p>

Wenn der Zeilenhöhe-Attributwert Einheiten hat, der geerbte Wert ist Ein bestimmter Wert auf px-Ebene nach der Konvertierung (zuerst berechnen und dann erben). Wenn der Attributwert keine Einheit hat, erbt der Browser diesen „Faktor (Wert)“ direkt anstelle des berechneten spezifischen Werts Die Zeilenhöhe wird basierend auf dem eigenen Schriftgrößenwert neu berechnet, um einen neuen Zeilenhöhenwert zu erhalten (zuerst geerbt und dann berechnet).

Zum Beispiel gibt es ein p und ein Unterelement p, und die Zeilenhöhe von p beträgt 150 %. Da die Standardschriftgröße 16 Pixel beträgt, kann der spezifische Zeilenhöhenwert von p konvertiert werden 16px * 150% = 24px. Da die Zeilenhöhe von p den konvertierten spezifischen Wert von 24px erbt, wird p als Schriftgröße neu definiert: 30px. Daher kommt es zu Überlappungen. Das Prinzip der anderen Einheiten ist das gleiche.

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website.

Verwandte Empfehlungen:

Über CSS So verwenden Sie den Hintergrund

Informationen zur Verwendung des Tabellenzellenattributs in CSS

Das obige ist der detaillierte Inhalt vonCSS verwendet die Zeilenhöhenmethode ohne Einheit. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!