如何在css中使用line-height屬性

這期內(nèi)容當(dāng)中小編將會(huì)給大家?guī)?lái)有關(guān)如何在css中使用line-height屬性，文章內(nèi)容豐富且以專(zhuān)業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

一、line-height語(yǔ)法

line-height屬性的具體定義列表如下：

語(yǔ)法： line-height : normal | <實(shí)數(shù)> | <長(zhǎng)度> | <百分比> | inherit

說(shuō)明： line-height 屬性設(shè)置行間的距離（行高），不能使用負(fù)值。該屬性會(huì)影響行框的布局。在應(yīng)用到一個(gè)塊級(jí)元素時(shí)，它定義了該元素中基線(xiàn)之間的最小距離而不是最大距離。 line-height 與 font-size 的計(jì)算值之差(行距)分為兩半，分別加到一個(gè)文本行內(nèi)容的頂部和底部?？梢园@些內(nèi)容的最小框就是行框。

可能的值：

二、line-height中頂線(xiàn)、中線(xiàn)、基線(xiàn)、底線(xiàn)的實(shí)例說(shuō)明

圖示說(shuō)明

從上到下四條線(xiàn)分別是頂線(xiàn)、中線(xiàn)、基線(xiàn)、底線(xiàn)，很像才學(xué)英語(yǔ)字母時(shí)的四線(xiàn)三格，我們知道vertical-align屬性中有top、middle、baseline、bottom，就是和這四條線(xiàn)相關(guān)。

尤其記得基線(xiàn)不是最下面的線(xiàn)，最下面的是底線(xiàn)。

三、line-height中行高、行距與半行距

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

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

半行距是行距的一半，即區(qū)域3垂直距離/2，區(qū)域1，2，3，4的距離之和為行高，而區(qū)域1，2，4距離之和為字體size，所以半行距也可以這么算：（行高-字體size）/2

圖片說(shuō)明

四、line-height中內(nèi)容區(qū)、行內(nèi)框、行框

內(nèi)容區(qū)：底線(xiàn)和頂線(xiàn)包裹的區(qū)域，即下圖深灰色背景區(qū)域。

行內(nèi)框，每個(gè)行內(nèi)元素會(huì)生成一個(gè)行內(nèi)框，行內(nèi)框是一個(gè)瀏覽器渲染模型中的一個(gè)概念，無(wú)法顯示出來(lái)，在沒(méi)有其他因素影 響的時(shí)候（padding等），行內(nèi)框等于內(nèi)容區(qū)域，而設(shè)定行高時(shí)行內(nèi)框高度不變，半行距【（行高-字體size）/2】分別增加/減少到內(nèi)容區(qū)域的上下 兩邊（深藍(lán)色區(qū)域）

行框（line box），行框是指本行的一個(gè)虛擬的矩形框，是瀏覽器渲染模式中的一個(gè)概念，并沒(méi)有實(shí)際顯示。行框高度等于本行內(nèi)所有元素中行內(nèi)框最大的值（以行高值最大的行內(nèi)框?yàn)榛鶞?zhǔn)，其他行內(nèi)框采用自己的對(duì)齊方式向基準(zhǔn)對(duì)齊，最終計(jì)算行框的高度），當(dāng)有多行內(nèi)容時(shí)，每行都會(huì)有自己的行框。

例如

圖片說(shuō)明

五、定義line-height的方式

1、line-height可以被定義為normal。

body { line-height:normal; }

2、line-height可以被定義為繼承

p { line-height:inherit; }

3、line-height可以使用一個(gè)百分比的值

p { line-height:120%; }

4、line-height可以被定義為一個(gè)長(zhǎng)度值（單位px、em等）

p { line-height:20px; }

5、line-height也可以被定義為純數(shù)字（甚至沒(méi)有單位）

p { line-height:1.2; } 

上述就是小編為大家分享的如何在css中使用line-height屬性了，如果剛好有類(lèi)似的疑惑，不妨參照上述分析進(jìn)行理解。如果想知道更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道。