line height normal是怎樣計算的

時間 2021-05-10 22:02:01

1樓:方應杭

這是 CSS 裡最難的知識點……就算你翻爛 W3C 文件都沒用,依然理解不了。W3C 只會告訴你這個值是字型自己的特性,但是原理到底是怎樣的,你無從得知。

我推薦你看這篇文章,原理講得很清楚:深入理解 CSS:字型度量、line-height 和 vertical-align

我保證大部分人看完這篇文章,就再也不想碰 vertical-align 了,而且依然理解不了 line-height。

因為你需要有一些「字型設計」的常識才能理解這篇文章。

這個知識點往大了說就是對 IFC 的理解。

前端為什麼只講 BFC(Block Formatting Context) 不講 IFC(Inline Formatting Context)?因為大部分前端不懂啊。

面試官甚至根本就不問 IFC(連他自己都不懂怎麼敢問你啊)。

衍生問題:為什麼 下面會無緣無故多出幾畫素?JS Bin

衍生問題2:為什麼把 font-size 變小之後,p 元素反而變高了?JS Bin

這個問題涉及的知識點太細了,我一般不敢問面試者。

如果我的答案激起了你對「字型設計」的興趣,你可以看看《Helvetica》這部電影。

關於經典字型Helvetica的故事

如果我的答案讓你退縮,也不要緊,因為很多人都跟你一樣退縮了(這樣說你是不是就好受一些 : )

從實際角度出發,我建議還是別了解 IFC 了,太難用了,直接用 FFC(Flex Formatting Context)吧。

P.S. 你問 CSS,我卻把你帶到了字型設計領域,估計又有人要說我裝逼了

你給前端新人教這麼多知識幹啥!他的大腦裝得下嗎?

我的回答:你的大腦容量小不代表別人大腦容量也小。

2樓:謝然

Visual formatting model details,w3文件原話:

normal

Tells user agents to set the used value to a "reasonable" value based on the font of the element. The value has the same meaning as <number>. We recommend a used value for 'normal' between 1.

0 to 1.2. The computed value is 'normal'.

意思就是設定為normal的時候具體的數值取決於當前元素所用的字型,推薦是1到1.2之間。

然後我寫了乙個頁面測了一下,確實是對於不同的字型用的值不一樣,上面是宋體,下面是預設的字型:

JS Bin

3樓:

雅思分數是怎樣計算的?

我是小女子 同學,你好。雅思考試滿分為9分 分數演算法取平均分 0.25進半分,6 6 6 4.5 是5.625,0.25進分得到6分。 雅思天後劉薇 考試成績記錄在成績單上,包括乙個總分,及聽力 閱讀 寫作和口語四個單項分,成績從1分至9分不等,每一項的分數權重相同。總分即是四個部分所得分數經過平...

Csgo的rating是怎樣計算的?

nasue rws和kast不是太高說明你不太善於跟隊友配合應該是比較喜歡當老六或者乙個人破點這種打法在團隊遊戲裡比較雙刃劍槍剛起來隊友直呼nb 一但失敗隊伍就會感覺把把在四打五想混更高的分還是要多想想怎麼幫隊友創造機會拿下比賽更多的信任隊友和隊友配合這個遊戲如果只去研究怎麼把rt刷高其實很難打好 ...

信用卡逾期是怎樣計算利息的

財經資訊 信用卡逾期之後銀行會按照天計算利息,利率為0.05 還有滯納金,這樣算下來根本就不划算的,如果真的有借貸需求,我更推薦使用微粒貸,我平時用的就是微粒貸,利息也比較低,用著也挺方便。 起風了 最低還款額是指持卡人在還款日 含 前償還當期應賬單還金額有困難時,可按發卡行規定的最低還款額進行還款...