首頁  >  文章  >  web前端  >  全面了解css行高line-height的用法說明

全面了解css行高line-height的用法說明

高洛峰
高洛峰原創
2017-03-08 14:53:492205瀏覽

本文導讀: 「行高「指一行文子的高度,具體來說是指兩行文子間基線間的距離。在CSS,line-height被用來控制行與行之間的垂直距離。 line- height 屬性會影響行框的佈局。在應用到一個區塊級元素時,它定義了該元素中基線之間的最小距離而不是最大距離。所有瀏覽器都支援 line-height 屬性。

一、line-height語法

#line-height屬性的特定定義清單如下:

語法: line-height : normal | | | | inherit

##說明: line-height 屬性設定行間的距離(行高),不能使用負值。此屬性會影響行框的佈局。在應用到一個區塊級元素時,它定義了該元素中基線之間的最小距離而不是最大距離。 line-height 與 font-size 的計算值之差(行距)分為兩半,分別加到一個文字行內容的頂部和底部。可以包含這些內容的最小框就是行框。

可能的值:


normal預設,設定合理的行間距。 number設定數字,此數字會與目前的字體尺寸length設定固定的行間距。 %基於目前字體尺寸的百分比行間距。 inherit規定應該從父元素繼承 line-height 屬性的值。


二、line-height中頂線、中線、基準線、底線的實例說明

圖示說明

全面了解css行高line-height的用法說明

從上到下四條線分別是頂線、中線、基線、底線,很像才學英文字母時的四線三格,我們知道vertical-align屬性中有top、middle、baseline、bottom,就是和這四條線相關。

尤其記得基準不是最下面的線,最下面的是底線。

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

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

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

半行距是行距的一半,即區域3垂直距離/2,區域1,2,3,4的距離之和為行高,而區域1,2,4距離之和為字體size ,所以半行距也可以這麼算:(行高-字體size)/2

圖片說明

全面了解css行高line-height的用法說明

四、line-height中內容區、行內框、行框

#內容區:底線和頂線包裹的區域,即下圖深灰色背景區域。

全面了解css行高line-height的用法說明

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

行框(line box),行框是指本行的一個虛擬的矩形框,是瀏覽器渲染模式中的一個概念,並沒有實際顯示。行框高度等於本行內所有元素中行內框最大的值(以行高值最大的行內框為基準,其他行內框採用自己的對齊方式向基準對齊,最終計算行框的高度),當有多行內容時,每行都會有自己的行框。

例如

圖片說明

全面了解css行高line-height的用法說明

1定義line-height的方式


###1、line-height可以定義為normal。 ######body { line-height:normal; }######2、line-height可以定義為繼承######p { line-height:inherit; }##### ##3、line-height可以使用一個百分比的值######p { line-height:120%; }######4、line-height可以定義為一個長度值(單位px 、em等)######p { line-height:20px; }#######5、line-height也可以定義為純數字(甚至沒有單位)######p { line-height:1.2; } ######以上就是小編為大家帶來的全面了解css行高line-height的用法全部內容了,希望大家多多支持PHP中文網######## #####
#說明
相乘來設定行間距。相當於倍數

以上是全面了解css行高line-height的用法說明的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn