（1-1）line-height的定義和與行內(nèi)框盒子模型的關(guān)系

一、line-height的定義

line-height的定義： 行高，又稱(chēng)為兩基線的距離。默認(rèn)基線對(duì)齊（因?yàn)?/span>CSS所有*線：總之就是各種定義的線都是和基線對(duì)齊的）

默認(rèn)X對(duì)齊。

下面貼出一個(gè)超大超大的大圖：?

? ?

?

注意！！不同字體下的基線位置會(huì)稍微有點(diǎn)變化，可能會(huì)有上浮或者下沉噢。

基線，和行高的一些作用和表現(xiàn)機(jī)理 兩基線的距離即為行高

?

二、line-height和行內(nèi)框盒子模型

所有內(nèi)聯(lián)元素的樣式表現(xiàn)都和行內(nèi)框盒子模型有關(guān)

?

?

?

?1、

2、

3、

4、

那么我們了解行內(nèi)框盒子模型，對(duì)我們了解行高有什么作用呢？有些人可能有這些疑問(wèn)，

來(lái)，看這里

?

為什么P元素有高度哪來(lái)的呢，是font-size嗎？？ no、no、no實(shí)際上是由行高確定的

?

?

?

　　有些人有這個(gè)疑問(wèn)。line-height明明是兩基線的距離，單行文字哪來(lái)的行高，還控制了高度？？

　　行高有繼承性，即使是單行文本也是有行高的。而且實(shí)際上控制高度的不是line-height（line-height 就是行高），而是幕后黑手。內(nèi)容區(qū)域和行間距；

不過(guò)~~~~ 行高等于內(nèi)容高度 上下半間距；

1、內(nèi)容區(qū)域高度只和字號(hào)以及字體有關(guān)，和line-height沒(méi)有半點(diǎn)關(guān)系。

2、網(wǎng)上有的說(shuō)字體大小就是內(nèi)容區(qū)域高度這個(gè)是不對(duì)的，只有在simsum 字體下，才完全相等。

?

?

　　那為什么font-size不一定等于內(nèi)容區(qū)域高度，那么為什么行高行高還等于font-size 上下半間距呢？？ ?因?yàn)樯舷掳腴g距是可以為負(fù)值跟隨行高和內(nèi)容高度變化的

?

那么單行行內(nèi)框盒子是不是為內(nèi)聯(lián)最高行高決定呢？ 答案是不一定的，會(huì)受到其他的（例如vertical-align）干擾，

?

多行行內(nèi)框盒子當(dāng)然就是每個(gè)單行行內(nèi)框盒子的總和了

?

---------------------------------------------------------分割線---------------------------------------------------

?

小編碼字找圖不易，希望小編的分享能對(duì)大家有所啟發(fā)。大家有不同的意見(jiàn)或建議可以在下面的留言區(qū)跟我交流。覺(jué)得好可以關(guān)注，后續(xù)還有繼續(xù)推文噢~　

?

? ? ? ?　　贊賞小編一個(gè)跳跳糖~~~

?

更多專(zhuān)業(yè)前端知識(shí)，請(qǐng)上 【猿2048】www.mk2048.com

總結(jié)

以上是生活随笔為你收集整理的（1-1）line-height的定义和行内框盒子模型的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。