一、行高的字面意思
「行高「顧名思義指一行文子的高度。具體來說是指兩行文子間基線間的距離。
基線是在英文本母中用到的乙個概念，我們剛學英語的時候使用到的那個英語本子每行有4條線，其中底部第二條線就是基線，是a,c,z,x等字母的地邊線。
————————頂線(top line)————————————————
——————————中線(middle line)————————————
————————————基線(base line)————————&stpsoprismdash;——
———————————————底線(bottom line)——————
vertical-align中有top,middle,baseline,bottom與之是有關聯的，但是具體細節如何，瀏stpsopris覽器差異怎樣，我還是不是很清楚。
但是由於中午跟英文長得不一樣，所以基線的說法就像老太太穿線一一對不上眼。你理解為底線之差也不為不可。只是定義一回事，表現則另一回事。
二、line-height與line boxes高度
先說乙個大家熟知的現象，有乙個空的div，
,如果沒有設定至少大於1畫素高度height值時，該div的高度就是個0.如果該div裡面打入了乙個空格或是乙個漢字 ，則此div就會有乙個高度。那麼您有沒有思考過，為什麼div裡面有文字後就會有高度呢？
這是個看上去很簡單的問題，是理解line-height非常重要的乙個問題。可能有人會認為是：文子撐開的！文子佔據空間，自然將dstpsoprisiv撐開。我一開始也是這樣理解的，但是事實上，深入理解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個字，如果它們在一行顯示www.cppcns.com，你艾佛森再牛，對不起，只有乙個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的個人理解
本文位址:
CSS行高line height的理解
一 行高的字面意思 行高 顧名思義指一行文子的高度。具體來說是指兩行文子間基線間的距離。基線是在英文本母中用到的乙個概念，我們剛學英語的時候使用到的那個英語本子每行有4條線，其中底部第二條線就是基線，是a,c,z,x等字母的地邊線。頂線 top line 中線 middle line 基線 base...
深入理解css行高line height
行高是相鄰兩行文字基線之間的垂直距離。看清楚是基線，估計有很多前端搞了幾年的都說不出個所以然。小時候我們寫英文26個英文本母的單詞本 隨便找個圖 一行裡面有四條線，在css中乙個行內非替換元素 例如span，em等 其內容區都會存在四條假想的線，分別是底線 bottom 基線 baseline 中線...
css中line height行高的深入學習
之前對css中行高line height的理解還是有些膚淺，深入後才發覺裡面包羅永珍。學習行高line height,首先從基本原理開始 標註該文章 該文章略有補充四種盒子 頂線 中線 基本 底線 中文english english中文 行高概述 指一行文字的高度。具體來說是指兩行文字間基線之間的距...