深刻理解line

什麼是行間距？

古時候咱們使用印刷機來出來文字。印刷出來的每一個字，都位於獨立的一個塊中。

行間距，即傳說中控制兩行文字垂直距離的東東。在CSS中，line-height被用來控制行與行之間垂直距離。

不過，行間距與半行間距，仍是取決於CSS中的line-height。那麼，如何來使用line-height呢？

默認狀態，瀏覽器使用1.0-1.2 line-height, 這是一個初始值。你能夠定義line-height屬性來覆蓋初始值：p｛line-height:140%｝

你能夠有5種方式來定義line-height。

1.line-height能夠被定義爲：body{line-height:normal;}

2.line-height能夠被定義爲：body{line-height:inherit;}

3.line-height可使用一個百分比的值body{line-height:120%;}

4.line-height能夠被定義爲一個長度值(px,em等) body{line-height:25px;}

5.line-height也能夠被定義爲純數字， body{line-height:1.2}

 

縮寫line-height

那5種line-height寫法，能夠在font屬性中縮寫。line-height的值緊跟着font-size值使用斜槓分開，如：<font-size>/<line-height>

實例：body{font:100%/normal  arial;} , body{font:100%/120%  arial;} ,body{font:100%/1.2  arial;}  ,body{font:100%/25px  arial;} 

計算line-height

有些CSS屬性是可繼承的（inherited），從層疊的元素裏傳遞下來。這樣作是爲了方便開發者，再也不爲後代元素從新設值。

對於line-height繼承有點複雜。

一、百分比

2，長度

3，normal

4，純數字

 

所謂行高是指文本行基線間的垂直距離。要想理解這句話首先得了解幾個基本知識：

頂線、中線、基線、底線

從上到下四條線分別是頂線、中線、基線、底線，很像才學英語字母時的四線三格，咱們知道vertical-align屬性中有top、middle、baseline、bottom，就是和這四條線相關。尤爲記得基線不是最下面的線，最下面的是底線。

行高是指上下文本行的基線間的垂直距離，即圖中兩條紅線間垂直距離。

行距是指一行底線到下一行頂線的垂直距離，即第一行粉線和第二行綠線間的垂直距離。

半行距是行距的一半，即區域3垂直距離/2，區域1，2，3，4的距離之和爲行高，而區域1，2，4距離之和爲字體size，因此半行距也能夠這麼算：（行高-字體size）/2

 

內容區、行內框、行框

內容區：底線和頂線包裹的區域，即圖深灰色背景區域。

行內框，每一個行內元素會生成一個行內框，行內框是一個瀏覽器渲染模型中的一個概念，沒法顯示出來，在沒有其餘因素影響的時候（padding等），行內框等於內容區域，而設定行高時行內框高度不變，半行距【（行高-字體size）/2】分別增長/減小到內容區域的上下兩邊（深藍色區域）

行框（line box），行框是指本行的一個虛擬的矩形框，是瀏覽器渲染模式中的一個概念，並無實際顯示。行框高度等於本行內全部元素中行內框最大的值（以行高值最大的行內框爲基準，其餘行內框採用本身的對齊方式向基準對齊，最終計算行框的高度），當有多行內容時，每行都會有本身的行框。

line-height

基本概念搞明白了咱們就能夠說說本文的主角line-height屬性了。

定義：line-height 屬性設置行間的距離（行高），不能使用負值。該屬性會影響行框的佈局。在應用到一個塊級元素時，它定義了該元素中基線之間的最小距離而不是最大距離。line-height 與 font-size 的計算值之差(行距)分爲兩半，分別加到一個文本行內容的頂部和底部。能夠包含這些內容的最小框就是行框。

div居中對齊一直是個難題，水平還好解決些，margin：0 auto; 能夠解決現代瀏覽器，IE下text-align:center。但垂直居中就沒那麼簡單了，默認是這樣子的。

<div style="width:150px;height:100px;background-color:#ccc;">
                <span>This is a test.<br/>
                        This is a test.                </span></div>

咱們能夠利用line-block這樣作

<div style="width:150px;height:100px;line-height:100px;background-color:#ccc;font-size:0;">
                <span style="display:inline-block;font-size:10px;line-height:1.4em;vertical-align:middle;">This is a test.<br/>
                        This is a test.                </span></div>

單行就比較簡單了，把line-height設置爲box的大小能夠實現單行文字的垂直居中

 

行高是可繼承的，但並非簡單的copy父元素行高，繼承的是計算得來的值。

<div style="border:dashed 1px #0e0;line-height:150%;font-size:10px;">
                <p style="font-size:30px;">
                    1232<br/>
                    123                </p></div>

按通常理解既然line-height能夠繼承，那麼p元素的行高也是150%了，但是事實是這樣的

非但沒有變成150%，反而連100%都沒有，重疊了！這就是繼承計算的結果，若是父元素的line-height有單位（px、%）,那麼繼承的值則是換算後的一個具體的px級別的值（在10px後有換算到30px ，但10px*150%已經繼承到下一個30px的值上）；上例p獲得的是10px*150%=15px的行高，而P的字體大小爲30px，因此發生了重疊。

而若是屬性值沒有單位，則瀏覽器會直接繼承這個「因子（數值）」，而非計算後的具體值，此時它的line-height會根據自己的font-size值從新計算獲得新的line-height 值。

<div style="border:dashed 1px #0e0;line-height:1.5;font-size:10px;">
                <p style="font-size:30px;">
                    1232<br/>
                    123                </p></div>