必須掌握的css屬性--lineheight

1，行高的定義

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

2，行內框盒子模型

<p>這是一個單行文字，這裡有一個<span>內容區</span>標籤。</p>

圖一

“內容地區” (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='icon'></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視頻教程