必須掌握的css屬性--lineheight

1，行高的定義

#行高是指行間的距離，也就是基準之間的距離，而只有兩行文字才會存在兩個基線，那麼為什麼單行文字還具有行高？我們懷著這個疑問往下看。

2，行內框盒子模型

#

這是一個單行文字，這裡有一個內容區標籤。

#圖一

「內容區域」 (content area )是圍繞文字的盒子，我們可以看做是滑鼠在選取文字區域的大小，它的大小只和font-size有關，可以看做是圖一中的文字被滑鼠選取的區域，也就是選取的「個單行文字」的區域。

「內嵌盒子」(inline boxs)不會讓文字成塊顯示，而是排列成一行。由內聯元素包裹的文字如span標籤包裹的“內容區”，可以稱之為“內聯盒子”，而沒有內聯元素包裹的部分，我們可以看做是“匿名內聯盒子」。 「內嵌盒子」可以看做圖一中span標籤內的「內容區」區域，而「匿名內嵌盒子」則可以看做紅色虛線包裹的內容。

“行框盒子”(line boxs)，每一行都是一個“行框盒子”，行框盒子由一個個匿名和非匿名內聯盒子組成。可以看做圖一中最外側紅色實線包裹的區域。

「包含盒子」(containing box)，此盒子由一個個「行框盒子組成」。

3，行高的高度機制

行高影響無所不在，即使是單行文字也不例外。

單行文字的高度表現只是受到line-height的影響，而主要是受到內容區域和行間距的影響。

單行文字行高：

line-height = 內容區域高度+ 行間距高度

那麼：

行間距= line-height - 內容區域高度

我們平常看到的文字上部與「行框盒子」的頂部之間的距離就是半行間距。

4，行高的單位

(1)，number

例如：

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

那麼此時文字佔據的高度為20*2=40px

(2)，length

例如：

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

以px為單位有一個固定的值，而其餘的則需要結合瀏覽器預設尺寸進行換算或是body的font-size屬性來計算。

(3)

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

那麼「文字文字」的行高為30px，內部p標籤行高也是30px，而不會根據子元素重新計算行高。

意思是說當設定行高為百分比的時候，父元素根據font-size計算的行高繼承給子元素，子元素不會根據font-size重裝計算行高，一般不常用。

(4)，normal

根據瀏覽器預設line-height屬性來設定行高。

(5)，inherit

行高繼承IE8+

繼承父元素的行高設置，通常是應用在一些input和button標籤。

5，line-height的應用

(1)，消除容器中圖片與底部的間距

圖二

產生原因：

內嵌元素預設基線對齊，空白標籤內含有空白幽靈節點，相當於圖片和一個文字對齊，根據vertical-align:baseline，所以圖片底部有間距。

這裡的幽靈空白節點我們可以理解成一個字母c，因為是基線對齊，且父元素沒有設定固定高度，所以父元素高度由內容填充，由於c要與圖片基線對齊，所以就會在下邊緣。

當父元素設定固定的高度時，單純p內包含圖片和字母c,預設圖片與文字基線對齊，圖三中c就相當於幽靈空白節點。

圖三

消除方法

1，讓圖片塊狀化

#2，圖片vertical-align:bottom

#

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视频教程

以上是必須掌握的css屬性--lineheight的詳細內容。更多資訊請關注PHP中文網其他相關文章！