什么是line-height(行高)？

line-height 是指兩行文字基線之間的距離。

什么是基線？

基線、底線、頂線、中線

注意：

• 基線（base line）并不是漢字文字的下端沿，而是英文字母“x”的下端沿。
• 不同字體的基線不盡相同。

行距、行高

line-height 與行內(nèi)框盒子模型

所有內(nèi)聯(lián)元素的樣式表現(xiàn)都與行內(nèi)框盒子模型有關(guān)。例如浮動的圖文環(huán)繞效果... and so on

什么是行內(nèi)框盒子模型

我們通過下面這段代碼進行講解

<p>這是一行普通的文字，這里有個<em>em</em>標(biāo)簽</p>

在這段代碼中包含了 4 中盒子：

content area 內(nèi)容區(qū)是指底線和頂線包裹的區(qū)域（行內(nèi)元素 display：inline 可以通過 background-color 屬性顯示出來），實際中不一定看得到，但確實存在。內(nèi)容區(qū)的大小依據(jù) font-size 的值和字?jǐn)?shù)進行變化。

inline boxes 。內(nèi)聯(lián)盒子不會讓內(nèi)容成塊排列，而是排成一行。如果外部 inline 水平的標(biāo)簽( span 、 a 、 em 等)則屬于 內(nèi)聯(lián)盒子 ,如果是光禿禿的文字則屬于 匿名內(nèi)聯(lián)盒子 。

line boxes 。每一行就是一個 行框盒子 。每個行框盒子又是由一個個 內(nèi)聯(lián)盒子 組成。

containing box 包含盒子。 包含盒子 是由一行一行的 行框盒子 組成。 <p> 標(biāo)簽就代表了一個 包含盒子 。(即上圖中的綠色部分)

line-height 的高度機理

深入理解內(nèi)聯(lián)元素的高度表現(xiàn)

在講解原理之前，我們先看以下代碼:

<p>這是一行普通的文字，這里有個<em>em</em>標(biāo)簽</p>

console.log(document.querySelector('p').clientHeight); // 輸出36px

現(xiàn)在我們思考這樣幾個問題:

• 元素的高度從何而來？
• 是由里面的文字撐開的？

the answer is ：元素的高度是由 line-height 決定的：

line-height 明明是兩基線之間的距離，單行文字哪來行高，還控制了高度？

• 行高由于其繼承性，影響無處不在，即使單行文本也不例外。
• 高度的表現(xiàn)不是行高，而是內(nèi)容區(qū)域和行間距。
• 內(nèi)容區(qū)域高度+行間距=行高
• 內(nèi)容區(qū)域高度只與字號以及字體有關(guān)，與 line-height 沒有任何關(guān)系。(在 simsun 字體下，內(nèi)容區(qū)域高度等于 font-size )。換句話說，在 simsun 字體下： font-size+行間距=line-height
• 行間距是上下均分的。

總結(jié)

• 行高決定內(nèi)聯(lián)盒子高度；行間距是墻頭草，可大可小(甚至負(fù)值)，保證高度正好等于行高。
• 多行文本的高度等于單行文本的高度累加。

 line-height 的各類屬性值

normal

line-height:normal; 默認(rèn)屬性值，與瀏覽器相關(guān)，且與元素字體相關(guān)聯(lián)。

 <number>

line-height:1.5; 使用數(shù)值作為行高，根據(jù)當(dāng)前元素的 font-size 大小計算。

 <length>

line-height:1.5em; 、 line-height:1.5rem; 、 line-height:20px; 使用具體單位作為行高值。

 <percent>

line-height:150% 使用百分比作為行高值。相對于設(shè)置了該 line-height 屬性的元素的 font-size 大小計算。

 inherit

input{line-height:inherit;} ,行高繼承。使用 inherit 可以讓文本框樣式可控性更強。 行高默認(rèn)具有繼承性，為什么還是這樣做？？？ 控件元素 的默認(rèn)行高是 normal ,而不是繼承父級元素的行高。

line-height:1.5 、 line-height:1.5em; 、 line-height:150% 的區(qū)別

在計算結(jié)果上是相同的，但是所影響的元素有區(qū)別。

• line-height:1.5 所有可繼承元素會根據(jù) font-size 重新計算行高。(也就是說其子元素都會根據(jù)自身的 font-size * 1.5 計算行高，每個子元素都要進行一次計算。)
• line-height:150%/1.5em ，當(dāng)前元素根據(jù) font-size 計算行高，繼承給下面的元素。（當(dāng)前元素根據(jù) font-size 計算行高，然后將所計算的出來的值繼承給后代，也就是說只需要當(dāng)前元素進行計算，而子元素不需要重新計算。）

body 全局?jǐn)?shù)值使用經(jīng)驗

如果是 blog ，已閱讀為主的網(wǎng)頁， line-height:1.5/1.6 較為適宜。

如果是面向用戶，并不是閱讀為主的網(wǎng)頁，則推薦使用匹配 20 像素的使用經(jīng)驗。 body{font-size:14px;line-height：1.4286} 或者合并形式 body{font:14px/1.4286 'microsoft yahei'}

line-height 與圖片高度表現(xiàn)。

line-height 不會影響圖片的高度。

隱匿文本節(jié)點： <p> 標(biāo)簽是一個文本節(jié)點，其默認(rèn)會有文本。即使 <p></p> ,也就是當(dāng)內(nèi)容為空時，也存在文本節(jié)點，只不過看不到而已。這樣的節(jié)點稱其為隱匿文本節(jié)點，也正因為隱匿文本節(jié)點的存在，才會造成下面圖中的情形。

如何消除圖片與底部之間的間隙？

在項目開發(fā)中，我們偶爾會遇到以下情形：

解決的辦法主要有以下三種：

1.圖片塊狀化。( vertical-align )只適用于 inline``inline-block 元素，也就是說對于 block 元素并沒有基線對齊的說辭。 img{display:block;}

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

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

line-height的實際應(yīng)用

1.實現(xiàn)大小不固定的圖片，多行文字的垂直居中

2.實現(xiàn)多行文本水平垂直居中

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評論