深入理解line-height

chemzqm 發(fā)布于2019-08-30 13:04 / 1064人閱讀

摘要：初學(xué)者也許會(huì)對(duì)這句話嗤之以鼻，但隨著我學(xué)習(xí)的深入，漸漸意識(shí)這句話還是有一定道理的。然而，我們真的了解它嗎又是由什么來(lái)決定的首先推薦一篇文章，深入了解的行高屬性假設(shè)你已經(jīng)讀完了這篇文章并且已經(jīng)大致理解那么這張圖應(yīng)該能看懂了。

HTML和CSS因?yàn)槠渌?jiàn)即所得的直觀特性，往往被冠上簡(jiǎn)單易學(xué)的名號(hào)。我一開(kāi)始也是這么想的，不就是那幾個(gè)控制浮動(dòng)、顏色、位置的標(biāo)簽嗎！CSS3不就是加了些花哨的特效嗎！
記得哪位大大說(shuō)過(guò)，前端開(kāi)發(fā)里CSS是最難的。初學(xué)者也許會(huì)對(duì)這句話嗤之以鼻，但隨著我學(xué)習(xí)的深入，漸漸意識(shí)這句話還是有一定道理的。用三體里的一句話就是

方寸之間，深不見(jiàn)底啊

每一個(gè)簡(jiǎn)單的屬性，都有你所不知的一面！今天就來(lái)說(shuō)說(shuō)這個(gè)line-height。我們?cè)谖恼碌呐虐嬷?，?jīng)常用到line-height這個(gè)屬性。然而，我們真的了解它嗎？line-height又是由什么來(lái)決定的？
首先推薦一篇文章，深入了解css的行高Line Height屬性
(假設(shè)你已經(jīng)讀完了這篇文章并且已經(jīng)大致理解)

那么這張圖應(yīng)該能看懂了。這個(gè)兩行的文字所包含的盒子，從里到外分別為：

content area(綠色字體所在的白色背景區(qū)域，邊框?yàn)榫G色)

inline-boxes(content area加上其上下的黃色區(qū)域(半行間距),邊框也為綠色)

line-boxes(包裹在inline-boxes外部的盒子，邊框?yàn)榧t色)

containing box(最外面的盒子，邊框?yàn)樗{(lán)色)

其中l(wèi)ine-boxes的高度取決于其包含的inline-boxes中最高的那一個(gè)，例如本圖片中的斜體fish。

圖中的黃色部分分布在content area的上下，這就是半行間距。譬如我們?cè)O(shè)置

p{font-size:16px;line-height:20px;}

那么黃色部分(半行間距)就是(20-16)/2=2px，上一行和下一行的半行間距疊加為4px，再加上字體本身的16px，那行距就自然是20px了(嚴(yán)格來(lái)說(shuō)，行距是上下兩行文字之間baseline的距離)

(未完)

參考資料
css行高line-height的一些深入理解及應(yīng)用

GPU云服務(wù)器云服務(wù)器深入理解系列深入理解linux 深入理解webrtc 深入理解python

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/115284.html

相關(guān)文章

深入理解line-height

摘要：初學(xué)者也許會(huì)對(duì)這句話嗤之以鼻，但隨著我學(xué)習(xí)的深入，漸漸意識(shí)這句話還是有一定道理的。然而，我們真的了解它嗎又是由什么來(lái)決定的首先推薦一篇文章，深入了解的行高屬性假設(shè)你已經(jīng)讀完了這篇文章并且已經(jīng)大致理解那么這張圖應(yīng)該能看懂了。 HTML和CSS因?yàn)槠渌?jiàn)即所得的直觀特性，往往被冠上簡(jiǎn)單易學(xué)的名號(hào)。我一開(kāi)始也是這么想的，不就是那幾個(gè)控制浮動(dòng)、顏色、位置的標(biāo)簽嗎！CSS3不就是加了些花哨的特效...

Java3y 2019-08-02 15:55 評(píng)論0 收藏0
【學(xué)習(xí)筆記】CSS深入理解之line-height

摘要：內(nèi)聯(lián)盒子的高度由決定，限制包含盒子的高度，兩者一致，即把內(nèi)聯(lián)盒子安放在包含盒子內(nèi)，排除其他外界干擾。這時(shí)候由內(nèi)聯(lián)盒子模型可知，行間距是等分的，中間部分是，達(dá)到看似居中的效果。可以得到結(jié)論和設(shè)置一致，并非是完全垂直，除非為。張?chǎng)涡竦腃SS深入理解之line-height學(xué)習(xí)筆記 line-height的定義行高：兩行文字基線之間的距離為何是基線：基線是定義所有字線的根本不同字體...

Stardustsky 2019-08-30 15:54 評(píng)論0 收藏0
CSS魔法堂：深入理解line-height和vertical-align

摘要：下的屬性值詳解以下內(nèi)容均在中測(cè)試默認(rèn)對(duì)齊方式這里作為參考系，而它的就是所要對(duì)齊的了。沒(méi)有任何變化。那改變又如何呢為了讓的清晰可見(jiàn)，特意添加一個(gè)的包裹著。前言一直聽(tīng)說(shuō)line-height是指兩行文本的基線間的距離，然后又說(shuō)行高等于行距，最近還聽(tīng)說(shuō)有個(gè)叫行間距的家伙，@張?chǎng)涡襁€說(shuō)line-height和vertical-align基情四射，貴圈真亂啊。。。。。。于是通過(guò)本篇來(lái)一探究竟...

avwu 2019-08-30 12:52 評(píng)論0 收藏0
深入理解css之vertical-align

摘要：但實(shí)質(zhì)上，只要是內(nèi)聯(lián)元素，這兩個(gè)元素都會(huì)同時(shí)在起作用。而解決方案可以有以下幾種元素不使用基線對(duì)齊，可以改為對(duì)齊元素塊狀化設(shè)置為設(shè)置為總結(jié)講解了的各類(lèi)屬性值及其效果起作用的前提是內(nèi)聯(lián)元素與都是同時(shí)作用在內(nèi)聯(lián)元素上的前言 vertical-align用來(lái)指定行內(nèi)元素（inline）或表格單元格（table-cell）元素的垂直對(duì)齊方式。也就是說(shuō)，對(duì)于塊級(jí)元素，vertical-align...

cgh1999520 2019-08-30 15:53 評(píng)論0 收藏0
深入理解css之line-height

摘要：的應(yīng)用大部分時(shí)候，我們?cè)O(shè)置，都是為了垂直居中對(duì)齊。然后我們給設(shè)置，這樣我們就可以重置設(shè)置的，又因?yàn)楸３至藘?nèi)聯(lián)特性，因此我們可以設(shè)置以及產(chǎn)生，從而實(shí)現(xiàn)近似垂直居中對(duì)齊。前言行高，顧名思義是一行文字的高度，而從規(guī)范上來(lái)說(shuō)則是兩行文字基線之間的距離。行高是作用在每一個(gè)行框盒子(line-box)上的，而行框盒子則是由內(nèi)聯(lián)盒子組成，因此，行高與內(nèi)聯(lián)元素可以說(shuō)是非常緊密，行高直接決定了內(nèi)聯(lián)元...

miya 2019-08-29 15:25 評(píng)論0 收藏0