CSS行高line height的理解

2021-09-06 13:20:56 字數 1522 閱讀 9386

一、行高的字面意思

「行高「顧名思義指一行文子的高度。具體來說是指兩行文子間基線間的距離。

基線是在英文本母中用到的乙個概念,我們剛學英語的時候使用到的那個英語本子每行有4條線,其中底部第二條線就是基線,是a,c,z,x等字母的地邊線。

————————頂線(top line)————————————————

——————————中線(middle line)————————————

————————————基線(base line)———————————

———————————————底線(bottom line)——————

vertical-align中有top,middle,baseline,bottom與之是有關聯的,但是具體細節如何,瀏覽器差異怎樣,我還是不是很清楚。

但是由於中午跟英文長得不一樣,所以基線的說法就像老太太穿線一一對不上眼。你理解為底線之差也不為不可。只是定義一回事,表現則另一回事。

二、line-height與line boxes高度

先說乙個大家熟知的現象,有乙個空的div,

,如果沒有設定至少大於1畫素高度height值時,該div的高度就是個0.如果該div裡面打入了乙個空格或是乙個漢字 ,則此div就會有乙個高度。那麼您有沒有思考過,為什麼div裡面有文字後就會有高度呢?

這是個看上去很簡單的問題,是理解line-height非常重要的乙個問題。可能有人會認為是:文子撐開的!文子佔據空間,自然將div撐開。我一開始也是這樣理解的,但是事實上,深入理解inline模型後,我發現,根本不是文字撐開了div的高度,而是line-height!喲證明很簡單(如下測試**):

css**:

.test1

.teset2

html**:

測試1測試2

結果:test1 div有文字大小,但是行高為0,結果div的高度就是個0;test2 div文字大小為0,但是有行高,為20畫素,結果div高度就是20畫素。這就說明撐開div高度的是line-height不是文字內容。

到底這個line-height行高怎麼就產生了高度呢?在linline box模型中,有個line boxes,這個是看不見的。line boxes的工作就是包裹每行文字。一行文字乙個 line boxes。例如」艾佛森退役"這5個字,如果它們在一行顯示,你艾佛森再牛,對不起,只有乙個line boxes罩著你;但是」春哥純爺們「這5個字,要是豎著寫,一行乙個,那真是夠爺們,乙個字罩著乙個line boxes,於是總計5個line boxes。line boxes什麼特性也沒有,就是高度。所以乙個沒有設定height屬性的div的高度就是由乙個line boxes的高度堆積而成的。

其實line boxes不是直接的生產者,屬於中層幹部,真正的活兒都是它的手下-inline boxes幹的,這些手下就是文字啦,啦,span之類的inline屬性的標籤啦。line boxes只是個考察匯報人員,考察它的手下誰的實際line-height值最高,誰最高,它就要誰的值,然後向上匯報,形成高度。例如,取手下line-height最高的值.則line boxes的高度就是40畫素了。

深入理解css行高line height

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

CSS行高line height的個人理解

一 行高的字面意思 行高 顧名思義指一行文子的高度。具體來說是指兩行文子間基線間的距離。基線是在英文本母中用到的乙個概念,我們剛學英語的時候使用到的那個英語本子每行有4條線,其中底部第二條線就是基線,是a,c,z,x等字母的地邊線。頂線 top line 中線 middle line 基線 base...

css中line height行高的深入學習

之前對css中行高line height的理解還是有些膚淺,深入後才發覺裡面包羅永珍。學習行高line height,首先從基本原理開始 標註該文章 該文章略有補充四種盒子 頂線 中線 基本 底線 中文english english中文 行高概述 指一行文字的高度。具體來說是指兩行文字間基線之間的距...