極客小俊

把邏輯思維轉(zhuǎn)變?yōu)榇a的技術(shù)博主

你不用拼過(guò)聰明人，你只需要拼過(guò)那些懶人 你就一定會(huì)超越大部分人!

什么是行距?

行距又稱為 行間距

行距 從意義上來(lái)說(shuō) 作用是讓我們閱讀文章的時(shí)候，好確定閱讀的方向!

行距 從css的角度來(lái)說(shuō), 代表的不是一個(gè)地方, 而是要分為兩個(gè)部分! 分別是一個(gè)文本行內(nèi)容的頂部和底部!

也就是說(shuō) 底線下面粉紅色標(biāo)注區(qū)域 和 頂線上面粉紅色標(biāo)注區(qū)域, 就是行間距

如下圖:

中間黃顏色部分 等于 ?上半行距 + 下半行距 之和 就是行間距, ?也就是行高與字體尺寸的差稱為行間距

但即使是只有一行文字,其實(shí)上方也是有行距的 只不過(guò)這個(gè)行距的高度僅僅是完整行距高度的一半! ?俗稱 半行距

行距小結(jié): 指相鄰文本行間上一個(gè)文本行底線和下一文本行頂線之間的距離。

當(dāng)然，有些人的理解是: （上文本行行高-內(nèi)容區(qū)高度）/2+（下文本行行高-內(nèi)容區(qū)高度）/2

行距的計(jì)算公式

為什么我們要算行距呢？ ?是因?yàn)樯厦嫣岬搅?半行距 ?那么這個(gè)半行距是如何求得呢 ？ 我們就要了解一下這個(gè)行距的計(jì)算公式了!

行間距 = line-height的值(行高) - font-size字體大小 ?(行間距 = 行高 - 字體大小)

然后 算出來(lái)的這個(gè)行間距 / 2 所得到的值分別給粉紅色的兩部, 分別加到一個(gè)行內(nèi)框(內(nèi)聯(lián)盒子)的頂部和底部即可! ?

也就是俗稱的 半行間距【（行高-字體size）/2 】分別增加 ?或者 減少到內(nèi)容區(qū)域的上下兩邊:

例如: ?設(shè)置行高為40px; ? 字體大小設(shè)為16px , ?那么根據(jù)上面的公式我們得到行間距的值是24px, 這個(gè)24像素要除以2 劃分為兩個(gè)部分!

也就是行內(nèi)容的頂部 和 底部 ?這兩個(gè)地方分別為: 12px像素! ?

案例代碼:

?<style>
? ? ?#cont{
? ? ? ? ?width:600px;
? ? ? ? ?background-color:rgb(255,255,30);
? ? ? ? ?line-height: 40px;
? ? ? ? ?font-size: 16px;
? ? ?}
?</style>
?
?<div id="cont">
? ? ?在過(guò)去的52周，騰訊的最低股價(jià)為324.29港元，最高為633港元。按照最高股價(jià)計(jì)算，騰訊的總市值在過(guò)去一年創(chuàng)造了歷史新高——突破6萬(wàn)億港元。
? ? ?在2018年的“930改革”后，經(jīng)歷2019年的波動(dòng)，騰訊終于在2020年重新回到增長(zhǎng)軌道。
? ? ?一方面，隨著游戲版權(quán)開(kāi)放，加上全球新冠肺炎疫情蔓延，騰訊的“現(xiàn)金?！睒I(yè)務(wù)游戲收獲頗豐；另外一方面，騰訊堅(jiān)決落地產(chǎn)業(yè)互聯(lián)網(wǎng)戰(zhàn)略，并初見(jiàn)成效，擺脫了增長(zhǎng)依賴于游戲業(yè)務(wù)的局面。
? ? ?在高速增長(zhǎng)下，2020年騰訊也存在一些隱憂，隨著監(jiān)管部門(mén)加強(qiáng)對(duì)于互聯(lián)網(wǎng)平臺(tái)經(jīng)濟(jì)的監(jiān)管和反壟斷的深入進(jìn)行，騰訊需要在適應(yīng)環(huán)境變化的情況下保持增長(zhǎng)
?</div>

所以上下文本之間的行間距也就是上面文本底部的12像素+下面文本頂部的12像素!

真正理解什么是行高?

我們知道了內(nèi)容區(qū)域與字體字號(hào)大小的關(guān)系、也知道了什么是行間距以后, 其實(shí)我們就可以反推出 行高是什么了!

公式: 內(nèi)容區(qū)域content area(或字體大小) + 行間距 = 行高

注意 :

1. 以上我們說(shuō)的內(nèi)容區(qū)域大小 其實(shí)相對(duì)而言就可以理解為 font-size字體大小!

2. 行高跟字體樣式也有一定關(guān)系! ?不同的字體默認(rèn)的行高是不一樣的! ?因?yàn)樽煮w的不同影響了內(nèi)容區(qū)域!

line-height行高小結(jié)

行高（line-height）：就是包括內(nèi)容區(qū)域(content area)與以內(nèi)容區(qū)為基礎(chǔ)對(duì)稱拓展的空白區(qū)域(也就是上下半行距)，我們稱之為行高。

一般情況下，也可以認(rèn)為是相鄰文本行基線間的距離。

如下圖:

line-height的各種取值類(lèi)型

line-height的取值可以是一個(gè)像素值!

特別注意:

1. line-height的大小與font-size大小 相等時(shí), 那么行間距為0! 也就是說(shuō)相當(dāng)于沒(méi)得行間距!

2. line-height的大小 不能小于 當(dāng)前元素的font-size大小! ? 否則算出來(lái)的行間距會(huì)負(fù)數(shù) 導(dǎo)致 每一行之間的文本重疊! 如下圖

line-height的取值可以是一個(gè)百分比%

指定一個(gè)百分?jǐn)?shù), 意思就是會(huì)相對(duì)于font-size字體大小去計(jì)算行高! ?沒(méi)有明白嗎？那我們看下面的案例吧!

案例1

font-size大小為30px,而line-height的大小為80%，也就是說(shuō)line-height的大小占 font-size大小的80%，又因?yàn)?0%相當(dāng)于 80/100就等于0.8，所以最終line-height的大小也就是行高為30px*0.8=24px,根據(jù)上面的公式，那么行間距就為24px-30px=-6px，上面文本底部與下面文本頂部都為-3px。

代碼如下：

?<style>
? ? ?#cont{
? ? ? ? ?width:600px;
? ? ? ? ?background-color:rgb(255,255,30);
? ? ? ? ?line-height: 80%;
? ? ? ? ?font-size: 30px;
? ? ?}
?</style>

注意: 但是如果使用百分比,那么這個(gè)百分比通常不會(huì)小于100%,因?yàn)樾∮?00%所計(jì)算出來(lái)的行距值是一個(gè)負(fù)數(shù)! ?其實(shí)跟上面的line-height的值小于當(dāng)前元素的font-size的值是一個(gè)道理! ?都是沒(méi)有意義的!

如下圖：

案例2

font-size大小為30px,而line-height的大小為200%，也就是說(shuō)line-height的大小就是 font-size大小的兩倍，又因?yàn)?00%相當(dāng)于 200/100就等于2，所以最終line-height的大小也就是行高為30px*2=60px,根據(jù)上面的公式，那么行間距就為60px-30px=30px，上面文本底部與下面文本頂部都為15px。這樣用百分比來(lái)表示行高才有意義。代碼如下：

?<style>
? ? ?#cont{
? ? ? ? ?width:600px;
? ? ? ? ?background-color:rgb(255,255,30);
? ? ? ? ?line-height: 200%;
? ? ? ? ?font-size: 30px;
? ? ?}
?</style>

如下圖：

小提示: line-height的百分比取值并不是很常用! ?通常都是像素值!

line-height的取值可以是一個(gè)整數(shù)數(shù)字!

如果設(shè)置line-height的值為一個(gè)整數(shù)數(shù)值，那么則行高的值其實(shí)就是font-size字體大小相應(yīng)的倍數(shù)!

簡(jiǎn)單的說(shuō)就是如果設(shè)置數(shù)值 此數(shù)字會(huì)與當(dāng)前的font-size字體大小相乘來(lái)設(shè)置行間距!

案例如下: ?這里line-height設(shè)置為2 也就相當(dāng)于上面的 line-height設(shè)置為:200%是一個(gè)道理!那么行高的實(shí)際大小為：30px*2=60px,也就是說(shuō)line-height:60px，則半行距=(60px-30px)/2=15px。代碼如下：

?<style>
? ? ?#cont{
? ? ? ? ?width:600px;
? ? ? ? ?background-color:rgb(255,255,30);
? ? ? ? ?line-height: 2;
? ? ? ? ?font-size: 30px;
? ? ?}
?</style>

line-height屬性與內(nèi)聯(lián)元素 垂直居中的關(guān)系

1、line-height讓單行文本垂直居中詳解

相信大家都知道一種說(shuō)法，想要讓一個(gè)單行文本垂直居中，那么只要設(shè)置line-height 的大小和 height高度一樣就可以了

例如:

一個(gè)塊元素中只有一行文字 或者 超級(jí)鏈接文字的情況下，也就是說(shuō)對(duì)于單行文本可以將line-height行高設(shè)置為當(dāng)前元素 或者 父元素的高度一樣就可以了!

這樣就可以讓這個(gè)單行文本在當(dāng)前元素中 ?或者 說(shuō)父元素中 垂直居中!

案例

?<style>
? ? ?#cont{
? ? ? ? ?width:600px;
? ? ? ? ?height: 100px;
? ? ? ? ?background-color:rgb(255,255,30);
? ? ? ? ?font-size: 30px;
? ? ? ? ?line-height: 100px;
? ? ?}
?</style>
?
?<div id="cont">
? ? ?hello world!
?</div>

但從我查閱資料并實(shí)際操作后，證明讓line-height的值設(shè)置為和height值一樣來(lái)實(shí)現(xiàn)單行文本的垂直居中這種說(shuō)法并不是很正確! ?

原因有如下:

要讓單行文本垂直居中。其實(shí)只需要設(shè)置line-height這一個(gè)屬性就可以了，根本不需要再設(shè)置一個(gè)height屬性, 所以有很多教程也誤導(dǎo)了大多數(shù)人一定要去設(shè)置一個(gè)height屬性才可以垂直居中，其實(shí)不然! ?如下:

?<style>
? ? ?#cont{
? ? ? ? ?width:600px;
? ? ? ? ?background-color:rgb(255,255,30);
? ? ? ? ?font-size: 30px;
? ? ? ? ?line-height: 100px;
? ? ?}
?</style>

2、line-height只能讓文本近似于垂直居中

這里的垂直居中只僅僅是無(wú)限接近于垂直居中! 為什么要說(shuō)成是接近于垂直居中呢?

原因1: 行高的實(shí)現(xiàn)在于CSS中的行間距是 一行文字的上下等分機(jī)制! 也就是說(shuō)一行文本的上面和下面所存在的行間距是相等的! 所以如果行間距只存在于一邊的話 那么文字是無(wú)法垂直居中的, 其實(shí)這也證明了文字垂直居中靠的重要因素就是上下行間距!

原因2: 剛剛說(shuō)了 接近于垂直居中，因?yàn)槲淖值闹芯€位置普遍要比 行框盒子的中間線位置要低一些! ?如果你不理解 請(qǐng)看下圖: 黃顏色的線 為行框盒子的中間線表示位置, ?藍(lán)色的線為文字的中線位置! 是不是文字中線比行框盒子低呢! 對(duì)吧! ?但有些字體因?yàn)榭雌饋?lái)可能比較有下沉的感覺(jué)，所以可能在行間距垂直居中的作用下會(huì)有1px像素的小差異 所以我們稱之為：接近于垂直居中!

所以我們說(shuō)的接近于垂直居中 而不能完全是垂直居中的原因是 vertical-align造成的, 和line-height是沒(méi)有關(guān)系的， 關(guān)于vertical-align屬性 在后面會(huì)詳細(xì)說(shuō)到這里就不多說(shuō)了!

3、line-height讓多行文本垂直居中

使用line-height來(lái)控制文本垂直居中,不僅僅用于單行文本， ?就連多行文本其實(shí)也是可以進(jìn)行垂直居中的!

多行文本的垂直居中和 單行文本中就不一樣了! 需要使用到vertical-align屬性!

案例代碼:

?<style>
? ? ?#cont{
? ? ? ? ?width:600px;
? ? ? ? ?background-color:rgb(255,255,30);
? ? ? ? ?line-height: 200px;
? ? ?}
? ? ?#cont>p{
? ? ? ? ?line-height: normal;
? ? ? ? ?display: inline-block;
? ? ? ? ?vertical-align: middle;
? ? ?}
?</style>
?
?<div id="cont">
? ? ?<p>
? ? ? ? ?測(cè)試數(shù)據(jù)...測(cè)試數(shù)據(jù)...測(cè)試數(shù)據(jù)...測(cè)試數(shù)據(jù)...測(cè)試數(shù)據(jù)...測(cè)試數(shù)據(jù)...測(cè)試數(shù)據(jù)...
? ? ? ? ?測(cè)試數(shù)據(jù)...測(cè)試數(shù)據(jù)...測(cè)試數(shù)據(jù)...測(cè)試數(shù)據(jù)...測(cè)試數(shù)據(jù)...測(cè)試數(shù)據(jù)...測(cè)試數(shù)據(jù)...
? ? ? ? ?測(cè)試數(shù)據(jù)...測(cè)試數(shù)據(jù)...測(cè)試數(shù)據(jù)...測(cè)試數(shù)據(jù)...測(cè)試數(shù)據(jù)...測(cè)試數(shù)據(jù)...測(cè)試數(shù)據(jù)...
? ? ? ? ?測(cè)試數(shù)據(jù)...測(cè)試數(shù)據(jù)...測(cè)試數(shù)據(jù)...測(cè)試數(shù)據(jù)...測(cè)試數(shù)據(jù)...測(cè)試數(shù)據(jù)...測(cè)試數(shù)據(jù)...
? ? ?</p>
?</div>
?

效果圖如下:

原理實(shí)現(xiàn)如下

1. 多行文本使用一個(gè)元素來(lái)包裹, 不管你用div、p、還是span、內(nèi)聯(lián)元素 還是 塊元素來(lái)包裹都是可以的! 但是必須設(shè)置一個(gè)display: inline-block; 好處就是讓這個(gè)元素保持內(nèi)聯(lián)元素的特性

2. 給多行文本的包裹元素 設(shè)置 line-height: normal; 是為了清除繼承下來(lái)的行高!

3. 在給包含多行文本的元素設(shè)置了 display: inline-block; ?屬性后 會(huì)產(chǎn)生關(guān)鍵的 行框盒子 ?而且前面我們已經(jīng)知道了 只要有一個(gè)行框盒子那么都會(huì)附帶一個(gè) 幽靈空白節(jié)點(diǎn)! 還不明白的會(huì)上面看看! ? 我們?cè)O(shè)置 line-height: 200px;就作用到了這個(gè)幽靈空白節(jié)點(diǎn)上! ?從而在行框前面 撐開(kāi)了 200px的高度

4. 又因?yàn)榻o多行文本的包含元素設(shè)置了display: inline-block; ?它現(xiàn)在是內(nèi)聯(lián)元素, 而內(nèi)聯(lián)元素 默認(rèn)是基線對(duì)齊的, 所以我們又給這個(gè)包含元素p設(shè)置了vertical-align屬性值為:middle 來(lái)調(diào)整這個(gè)多行文本的垂直位置! ?最后就實(shí)現(xiàn)了我們所看到的多行文本垂直居中效果! ?如果是圖片原理是一樣的!

line-height 與 font 的使用順序問(wèn)題

使用font屬性也可以設(shè)置行高，可以在字體大小后添加 /行高大小 來(lái)表示行高，這個(gè)值是可選的，不指定的時(shí)候會(huì)采用默認(rèn)值也就是沒(méi)得。

例如:

?font: 30px/行高值px '字體樣式';

但是當(dāng)line-height屬性設(shè)置在 font 屬性之前，并且 font 屬性中沒(méi)有設(shè)置行高的時(shí)候，line-height屬性會(huì)被font 屬性中的行高默認(rèn)值覆蓋，也就是說(shuō)在這個(gè)時(shí)候line-height屬性是無(wú)效的。所以如果想要設(shè)置行高，可以把line-height屬性設(shè)置在 font 屬性之后，也可以直接在 font 屬性里面設(shè)置行高。

案例:

?<style>
? ? ?/*line-height會(huì)被font的默認(rèn)行高而覆蓋*/
? ? ?#cont{
? ? ? ? ?width:600px;
? ? ? ? ?background-color:rgb(255,255,30);
? ? ? ? ?line-height: 50px;
? ? ? ? ?font: 30px '微軟雅黑';
? ? ?}
? ? ?
? ? ?/*line-height寫(xiě)在font下面會(huì)被正常解析*/
? ? ?#cont{
? ? ? ? ?width:600px;
? ? ? ? ?background-color:rgb(255,255,30);
? ? ? ? ?font: 30px '微軟雅黑';
? ? ? ? ?line-height: 50px;
? ? ?}
? ? ?
? ? ?/*直接通過(guò)font來(lái)調(diào)整line-height行高*/
? ? ?#cont{
? ? ? ? ?width:600px;
? ? ? ? ?background-color:rgb(255,255,30);
? ? ? ? ?font: 30px/50px '微軟雅黑';
? ? ?}
? ? ?
?</style>

小結(jié): 所以使用font屬性的時(shí)候要注意一些其他文本屬性的順序，例如line-height, font-style,font-weight,font-family 這些屬性要是寫(xiě)在font前面都可能被后面的font默認(rèn)值所覆蓋! 注意使用順序即可!

line-height 與 圖片之間的細(xì)微關(guān)系

我們先來(lái)看一個(gè)案例吧:

?<style>
? ? ?div{
? ? ? ? ?width:500px;
? ? ? ? ?background: yellow;
? ? ?}
?</style>
?
?<div>
? ? ?<img src="images/1.gif">
?</div>

結(jié)果圖:

從上圖中可以看出，圖片在div元素中的下部會(huì)有一點(diǎn)點(diǎn)間隙! 這正因?yàn)榍懊嫣岬降?匿名空白文本節(jié)點(diǎn)的存在，才會(huì)造成圖中的情形!

為什么給父元素設(shè)置text-align: center; 會(huì)讓內(nèi)部的img元素居中?

案例:

?<div>
? ? ?<img src="images/1.gif">
?</div>
?<style>
? ? ?div{
? ? ? ? ?width:300px;
? ? ? ? ?background: yellow;
? ? ? ? ?text-align: center;
? ? ?}
?</style>

如圖:

原因: 這其實(shí)是居中的 幽靈空白節(jié)點(diǎn), 而不是圖片! ?因?yàn)橛撵`空白節(jié)點(diǎn)也是一個(gè)文本節(jié)點(diǎn),設(shè)置text-align: center; 理所當(dāng)然會(huì)居中，而且后面的圖片和前面的幽靈空白節(jié)點(diǎn)同樣都是 內(nèi)聯(lián)元素，幽靈空白節(jié)點(diǎn)居中的時(shí)候就把圖片頂過(guò)來(lái)了! 而且幽靈空白節(jié)點(diǎn)是0寬度看不出來(lái)的，所以我們看到的就僅僅是圖片居中了! ?(個(gè)人理解僅供參考)

解決圖片因幽靈空白節(jié)點(diǎn)而產(chǎn)生的底部空隙

1. 圖片塊狀化。vertical-align 只適用于inline、inline-block元素，也就是說(shuō)對(duì)于block元素并沒(méi)有基線對(duì)齊這一說(shuō)。所以設(shè)置: ?img{display:block;}, 其實(shí)反推圖片塊狀化了之后 ，設(shè)置 text-align: center;圖片也自然不會(huì)居中了! ?這時(shí)居中圖片應(yīng)該使用塊元素居中的辦法了!比如給圖片設(shè)置 : margin: 0 auto; 居中等等...

2. 圖片底線對(duì)齊 img{vertical-align:bottom;}

3. 行高足夠小，使基線上移 .box{line-height:0}

line-height行高總結(jié)

行高（line-height）：就是包括內(nèi)容區(qū)與以內(nèi)容區(qū)為基礎(chǔ)對(duì)稱拓展的空白區(qū)域(也就是上下半行距) 加起來(lái)的總和，我們稱之為行高

給行元素(內(nèi)聯(lián)元素)設(shè)置line-height后, ?行內(nèi)框(內(nèi)聯(lián)元素盒子) 撐開(kāi)了行框 ?, ?而行框又撐開(kāi)了內(nèi)容區(qū)域、而內(nèi)容區(qū)域撐開(kāi)了包含元素也就是最外層的包含塊!

撐開(kāi)的部分平均分布在上下兩側(cè)就是行距 ?! ?

而行高 就是 內(nèi)容區(qū)域+ 兩側(cè)行間距 ?就是 = 行高

大家的支持就是我堅(jiān)持下去的動(dòng)力!