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

一、line-height的定義

line-height的定義： 行高，又稱為兩基線的距離。默認基線對齊（因為CSS所有*線：總之就是各種定義的線都是和基線對齊的）

默認X對齊。

下面貼出一個超大超大的大圖：?

? ?

?

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

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

?

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

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

?

?

?

?1、

2、

3、

4、

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

來，看這里

?

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

?

?

?

　　有些人有這個疑問。line-height明明是兩基線的距離，單行文字哪來的行高，還控制了高度？？

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

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

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

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

?

?

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

?

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

?

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

?

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

?

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

?

? ? ? ?　　贊賞小編一個跳跳糖~~~

?

更多專業(yè)前端知識，請上 【猿2048】www.mk2048.com

總結(jié)

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

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