深入理解line height

2022-06-16 23:39:14 字數 3040 閱讀 9999

第一節 line-heigth的定義

line-height的定義

line-height  行高,

兩行文字基線之間的距離

1.什麼是基線 baseline,x最上面和最下面的距離

2.為何是基線 基線是*(所有線)的基礎

3.需要倆行嗎 兩行的定義已經決定了一行的表現

baseline與字型,不同的字型和基線是有關的。

line-height:200px 與baseline

第一行文字的基線與第二行文字的基線就是行高

為何line-height可以讓單行文字居中

第二節:line-height與行內框盒子模型

行內框盒子模型-css高階必備知識

所有內聯元素的樣式表現都與行內框盒子模型有關!例如浮動的**環繞效果

行內框盒子模型

這是一行普通的文字,這裡有個em標籤。

包含四種盒子

1.內容區域(content area)是一種圍繞文字看不見的盒子,內容區域大小與font-size大小相關

2.內聯盒子(inline-boxes)內聯盒子不會讓內容成塊顯示,而是排成一行,如果外部含inline水平的標籤

span a em 等,則屬於內聯盒子,如果是個光禿禿的文字,則屬於匿名內聯盒子

3.行框盒子模型

行框盒子 line boxes 每一行就是乙個行框盒子,每個行框盒子又是有乙個乙個內聯盒子 inline box組成

4.標籤所在的包含盒子containing box此盒子由一行一行的行框盒子 line boxes組成

所以說行內框盒子模型共有四種

1.內容區域content area

2.內聯盒子inline boxes

3.行框盒子line boxes

4.包含盒子 containing box

第三節:line-height的高度機理 深入理解內聯元素的高度表現

文字佔據的高度

例如這是一行普通的文字,這裡有個em標籤。

document.queryselector("p").clientheight

獲取p標籤的高度。

元素的高度從何而來,是由裡面的文字撐開的?答案 不是

p元素的高度是由line-height決定的。

.test1

.test2

結果:test2的高度還在。

內聯元素的高度是由行高決定的。

問題:line-height命名是倆基線距離,單行文字哪來行高,還控制了高度

前提:1.行高由於其繼承性,影響無處不在,即使單行文字也不例外。

2.行高只是幕後**,高度的表現不是行高,而是內容區域和行間距

內容區域高度(content area) + 行間距(vertical spacing) = 行高(line-heigth)

1.內容區域高度只與字型大小以及字型有關,與line-height沒有任何關係。

2.在simsun字型下,內容區域高度等於文字大小值。

在simsun(宋體)字型下:font-size + 行間距 = line-height

font-size:240px

line-height:360px 則行間距= 360-240 =120px

行間距上下拆分,就有了「半行間距」

總結:行高決定內聯盒子高度,行間距牆頭草,可大可小,保證高度正好等同於行高。

問題 如果行框盒子裡面有多個不同行高的內聯盒子,行框裡面的行高怎麼表現。

一般情況下認為由行框裡面最高的盒子決定。

多行文字的高度就是單行文字高度累加。

如果行框盒子裡面混入inline-block水平元素(如,按鈕),高度如何表現呢

第四節:line-height各類屬性值 ——深入理解line-height不同類別值得不同表現

line-height支援屬性值

normal line-height:normal 預設屬性值 跟使用者瀏覽器

number line-height:1.5 根據當前元素的font-size大小計算。假設文字大小20則行高 line-height = 1.5*20px = 30px

length line-height:1.5em rem px pt

percent line-height:150% 相對於設定了該line-height屬性的元素的font-size計算 假設文字大小20px,則實際行高畫素值是:150%*20 = 30px

inherit line-height:inherit input框等元素預設行高normal,使用inherit可以讓文字框樣式可控性更強。

問題 line-height:1.5

line-height:150%

line-heigth:1.5em

差別表現上無差別,應用元素有差別,line-height:1.5所有可繼承的元素根據font-size重計算行高

line-height:150%/1.5em當前元素根據font-size計算行高,繼承給下面的元素。

推薦使用數值。不推薦使用相對值。

tip:body全域性數值行高使用經驗

body 14*1.4286=12 行高等於20

匹配20畫素的使用經驗---方便心算

縮寫body

第五節:line-height與的表現

行高會不會影響實際佔據的高度?

行高不會影響佔據的高度。

隱匿文字節點 是inline-block表現形式,為了和文字在乙個基線上。所以在下方會留白。

如何消除底部間隙?

1.塊狀化-無基線對齊

img2.底線對齊

img 底線對齊

3.行高足夠小-基線位置上移

.box

小和大文字

基本上高度受行高控制

第六節:line-height的實際應用

實現大小不固定的,多行文字垂直居中。

水平垂直居中

.box

.box>img 基線往上1/2x高度

多行文字水平垂直居中

.box

.box>.text

實際應用:

代替height,避免ie6/7下的haslayout

深入理解css之line height

行高,顧名思義是一行文字的高度,而從規範上來說則是兩行文字基線之間的距離。行高是作用在每乙個行框盒子 line box 上的,而行框盒子則是由內聯盒子組成,因此,行高與內聯元素可以說是非常緊密,行高直接決定了內聯元素的高度 注意 這裡的內聯元素不包括替換元素 對於塊級元素和替換元素,行高是無法決定最...

深入理解css行高line height

行高是相鄰兩行文字基線之間的垂直距離。看清楚是基線,估計有很多前端搞了幾年的都說不出個所以然。小時候我們寫英文26個英文本母的單詞本 隨便找個圖 一行裡面有四條線,在css中乙個行內非替換元素 例如span,em等 其內容區都會存在四條假想的線,分別是底線 bottom 基線 baseline 中線...

深入理解C語言 深入理解指標

關於指標,其是c語言的重點,c語言學的好壞,其實就是指標學的好壞。其實指標並不複雜,學習指標,要正確的理解指標。指標也是一種變數,占有記憶體空間,用來儲存記憶體位址 指標就是告訴編譯器,開闢4個位元組的儲存空間 32位系統 無論是幾級指標都是一樣的 p操作記憶體 在指標宣告時,號表示所宣告的變數為指...