課程
/前端開發(fā)
/HTML/CSS
/CSS深入理解之line-height
行高足夠小,基線位置上移怎么理解?
2017-01-11
源自:CSS深入理解之line-height 5-1
正在回答
這個問題問得非常好,其實,老師講得有問題,基線的位置是不會動的。它的過程是這樣的:行高開始比內(nèi)容區(qū)域高,此時行間距大于0,隨著行間距不斷減少,減少到0,行高和內(nèi)容區(qū)域一樣高,這個時候還有空隙,這個空隙是什么呢?這個空隙是descender,就是基線到底線之間的距離。我們讓行間距繼續(xù)減少為負數(shù),該負數(shù)的值正好等于descender,
此時,行框盒子底部上移,行框盒子底部和文字基線重合,descender部分溢出行框盒子
可以再看一下頭2節(jié)理解下內(nèi)容區(qū)、基線、行間距
行高減小,會先減少行間距,當(dāng)行間距減小到0時,就只剩內(nèi)容區(qū)(內(nèi)容區(qū)有頂線、中線、基線和底線4條,類似英文簿那4條線),這時候繼續(xù)減小行高,會壓扁內(nèi)容區(qū)(本章后面那個例子中文字白色背景部分),基線也就會往中間壓縮,最后內(nèi)容區(qū)成一條線消失。由于基線偏下,所以說是上移。
line-height定義了該元素中基線之間的最小距離而不是最大距離。
行高=0,基線之間距離=0,基線上移了,基線到bottom距離=0,所以沒有空白了。
這是我的理解,不知道對不對。
舉報
帶領(lǐng)大家深入理解line-height的定義,還有實際應(yīng)用經(jīng)驗分享
4 回答基線是行高中線?
2 回答內(nèi)聯(lián)元素的高度是由行高決定的&&高度的表現(xiàn)不是行高 是否矛盾? 為什么line-height是由文本間的基線來計算的,但是單行文本卻有l(wèi)ine-height
1 回答關(guān)于基線的配圖
1 回答行間距怎么設(shè)置
1 回答沒有設(shè)置 height 的 p 標(biāo)簽的高度是由各行的行高加起來的嗎?
Copyright ? 2025 imooc.com All Rights Reserved | 京ICP備12003892號-11 京公網(wǎng)安備11010802030151號
購課補貼聯(lián)系客服咨詢優(yōu)惠詳情
慕課網(wǎng)APP您的移動學(xué)習(xí)伙伴
掃描二維碼關(guān)注慕課網(wǎng)微信公眾號
2024-05-09
這個問題問得非常好,其實,老師講得有問題,基線的位置是不會動的。它的過程是這樣的:行高開始比內(nèi)容區(qū)域高,此時行間距大于0,隨著行間距不斷減少,減少到0,行高和內(nèi)容區(qū)域一樣高,這個時候還有空隙,這個空隙是什么呢?這個空隙是descender,就是基線到底線之間的距離。我們讓行間距繼續(xù)減少為負數(shù),該負數(shù)的值正好等于descender,
此時,行框盒子底部上移,行框盒子底部和文字基線重合,descender部分溢出行框盒子
2018-04-29
可以再看一下頭2節(jié)理解下內(nèi)容區(qū)、基線、行間距
行高減小,會先減少行間距,當(dāng)行間距減小到0時,就只剩內(nèi)容區(qū)(內(nèi)容區(qū)有頂線、中線、基線和底線4條,類似英文簿那4條線),這時候繼續(xù)減小行高,會壓扁內(nèi)容區(qū)(本章后面那個例子中文字白色背景部分),基線也就會往中間壓縮,最后內(nèi)容區(qū)成一條線消失。由于基線偏下,所以說是上移。
2017-01-12
line-height定義了該元素中基線之間的最小距離而不是最大距離。
行高=0,基線之間距離=0,基線上移了,基線到bottom距離=0,所以沒有空白了。
這是我的理解,不知道對不對。