Das CSS-Attribut, das beherrscht werden muss – lineheight

1. Die Definition der Zeilenhöhe

Die Zeilenhöhe bezieht sich auf den Abstand zwischen den Zeilen, also auf den Abstand zwischen den Grundlinien Eine Grundlinie. Warum hat eine einzelne Textzeile immer noch eine Zeilenhöhe? Mit dieser Frage im Hinterkopf blicken wir nach unten.

2, Inline-BoxBoxModell

e388a4556c0f65e1904146cc1a846beedieses Es handelt sich um eine einzelne Textzeile und es gibt ein 45a2772a6b6107b401db3c9b82c049c2content-Bereich54bdf357c58b8a65c66d7c19c8e4d114-Tag. 94b3e26ee717c64999d7867364b1b4a3

Abbildung 1

"Inhaltsbereich" (Inhaltsbereich ) ist das Feld, das den Text umgibt. Wir können es uns als die Größe des mit der Maus ausgewählten Textbereichs vorstellen Der Text in Abbildung 1 wird mit der Maus ausgewählt, d. h. der Bereich der „einzelnen Textzeilen“ wird ausgewählt.

„Inline-Boxen“

(Inline-Boxen) zeigt den Text nicht in Blöcken, sondern in einer Zeile an. Von Inline-Elementen umschlossener Text, wie z. B. der vom Span-Tag umschlossene „Inhaltsbereich“, kann als „Inline-Box“ bezeichnet werden, während der Teil, der nicht von Inline-Elementen umschlossen ist, als „anonymer Inhalt“ betrachtet werden kann. „Verknüpfte Box“. Die „Inline-Box“ kann als „Inhaltsbereich“-Bereich innerhalb des Span-Tags in Abbildung 1 gesehen werden, und die „anonyme Inline-Box“ kann als der von der roten gepunkteten Linie umschlossene Inhalt gesehen werden.

"Zeilenbox-Box"

(Zeilenboxen), jede Zeile ist eine "Zeilenbox-Box", und die Zeilenbox-Box besteht aus anonymen und nicht anonymen Inline-Boxen. Es ist als der Bereich zu sehen, der in Abbildung 1 von der äußersten roten durchgezogenen Linie umschlossen ist.

"Containing box"

(Containing box), diese Box besteht aus "Line-Box-Boxen".

3. Der Höhenmechanismus der Zeilenhöhe

Der Einfluss der Zeilenhöhe ist überall, selbst eine einzelne Textzeile ist keine Ausnahme.

Die Höhenleistung einer einzelnen Textzeile wird nur durch

line-height

beeinflusst, vor allem aber durch den Inhaltsbereich und den Zeilenabstand. Zeilenhöhe für einzeiligen Text:

Zeilenhöhe = Höhe des Inhaltsbereichs + Höhe des Zeilenabstands

Dann:

Zeilenabstand = Zeilenhöhe - Höhe des Inhaltsbereichs

Der Abstand zwischen dem oberen Rand des Textes und dem oberen Rand des „Zeilenfelds“, den wir normalerweise sehen, ist der halbe Zeilenabstand.

4, Zeilenhöheneinheit

(1), Zahl

Zum Beispiel:

dann der Text bei Diesmal beträgt die belegte Höhe 20*2=40px

line-height:2;
font-size:20px;

(2), Länge

Beispiel:

hat einen festen Wert in px, während der Rest Sie muss basierend auf der Standardgröße des Browsers konvertiert oder mithilfe des Attributs „font-size“

font-size:20px;
line-height:20px;
line-height:2em;
line-height:3rem;
line-height:3pt;

des Textkörpers berechnet werden. (3)

Dann beträgt die Zeilenhöhe von „Texttext“ 30 Pixel und die Zeilenhöhe des internen p-Tags beträgt ebenfalls 30 Pixel, ohne dass die Zeilenhöhe basierend darauf neu berechnet wird untergeordnete Elemente.

<p>
    文字文字
    <p>这是p标签</p>
</p>
p{
font-size:20px;
line-height:150%;
}
p{
font-size:50px;
}

bedeutet, dass, wenn die Zeilenhöhe als Prozentsatz festgelegt ist, die Zeilenhöhe des übergeordneten Elements, die auf der Grundlage der Schriftgröße

berechnet wird,

an das untergeordnete Element geerbt wird und das untergeordnete Element nicht basierend auf dieser neu berechnet wird auf Schriftgröße, wird im Allgemeinen nicht häufig verwendet. (4), normal

legt die Zeilenhöhe entsprechend der standardmäßigen Zeilenhöheneigenschaft des Browsers fest.

(5), erben

Zeilenhöhenvererbung IE8+

erbt die Zeilenhöheneinstellung des übergeordneten Elements, die normalerweise auf einige Eingabe- und Schaltflächen-Tags angewendet wird.

5, Anwendung der Zeilenhöhe

(1), Beseitigung des Abstands zwischen dem

Bild

und dem Boden im Behälter

Abbildung 2

Ursache:

Inline-Elemente sind standardmäßig an der Grundlinie ausgerichtet, und leere Tags enthalten leere Geisterknoten, was gleichbedeutend ist um ein Bild an einem Text auszurichten, entsprechend

vertical-align

:baseline, sodass am unteren Rand des Bildes ein Abstand vorhanden ist. Wir können den leeren Geisterknoten hier als Buchstaben c verstehen. Da er an der Grundlinie ausgerichtet ist und das übergeordnete Element keine feste Höhe festlegt, wird die Höhe des übergeordneten Elements durch den Inhalt gefüllt Es muss an der Grundlinie des Bildes ausgerichtet sein, sodass es sich am unteren Rand befindet.

Wenn das übergeordnete Element auf eine feste Höhe eingestellt ist, enthält das einfache p ein Bild und den Buchstaben c. Standardmäßig ist das Bild an der Textgrundlinie ausgerichtet. In Abbildung 3 entspricht c einem Geist leerer Knoten.

Bild 3

Eliminierungsmethode

1, machen Sie das Bild blockig

2, Bild vertikal ausrichten:

unten

3，让匿名空白节点line-height:0

(2)，小图标大文字

<i class=&#39;icon&#39;></i>
<span>这是span标签内的文字</span>
span{
line-height:30px;
vertical-align:middle;
}
i{
vertical-align:middle;
}

(3)，图片水平垂直居中

图三

图四

原理：

空白p内存在空白幽灵节点(看不见摸不着但存在空白元素中，例如图四中的)。

当设置text-align的时候，内联元素文字和图片会居中显示，我们让空白幽灵节点的行高与p高度一致，这样就可以实现垂直居中，图片和幽灵空白节点默认基线对齐，这时图片将偏上显示，我们设置图片的vertical-align为middle就可以实现图片近似居中的效果了。

如果想让图片完全垂直居中，我们可以让p的font-size:0，原因是不同字体的显示效果不同，有的下沉，有的刚好中线对齐，当font-size:0的时候，文字就变成一个点了，也就不存在不同字体的差异了。

(4)，多行文本垂直居中

图五

图六

原理：

我们可以把span看做是图片，这样原理就和图片垂直居中原理大同小异了。就是需要将span的元素display设置成inline-block，并且重置line-height和text-align。

为何display不能是inline属性，个人观点，如果还是inline元素的话，由于此时父元素的line-height过高，子元素设置的行高很小就没有作用（因为line-height达不到父元素行高的高度，所以看上去好像是无效的），类似于margin中的由于浮动或者绝对定位的无效的原因，我在另外margin篇有介绍，css中margin的深入了解，如果有兴趣可以去看看，如果设置子元素line-height设置很大的话是有作用的，所以只能让span元素为inline-block元素，inline-block具有包裹性,所以呈现出图六效果。

如果容器是自适应高度的，无法获得高度，那么我们可以让外部容器为表格元素居中。

【相关推荐】

1. 免费css在线视频教程

2. css在线手册

3. php.cn独孤九贱（2）－css视频教程

Das obige ist der detaillierte Inhalt vonDas CSS-Attribut, das beherrscht werden muss – lineheight. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!