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