摘要：簡(jiǎn)單來(lái)說(shuō)就是所有未包含在行內(nèi)元素中的字符串。在行內(nèi)替換元素中，內(nèi)容區(qū)是元素的固有高度再加上可能有的外邊距邊框和內(nèi)邊框。行內(nèi)框是可見的。

1.這些文字是如何擺放這么整齊的？為什么這個(gè)龐然大物的底部能對(duì)齊，頂部沒(méi)對(duì)齊？為什么第二行與第一行的間距那么大？

2.為什么光禿禿的p標(biāo)簽沒(méi)有高度，為什么在p標(biāo)簽中寫入文字就有高度了呢？真的是因?yàn)槲淖执笮纹饋?lái)的嗎？

vertical-align是主謀之一，使得龐然大物的底部對(duì)齊

line-height是另一主謀，導(dǎo)致頂部沒(méi)對(duì)齊以及巨大間距和p高度

匿名文本、em框，font-size,內(nèi)容區(qū)，行間距,行內(nèi)框，行框，行內(nèi)非替換元素間接或直接參與了犯罪

場(chǎng)景回顧

    

        This is the content of the element p. Here is inline element. I am glad that you  come to read here.I hope that 
        you can learn more from here. So  just code, it"s a great things. Let"s go!!!.
    

匿名文本：英文名anonymous text。簡(jiǎn)單來(lái)說(shuō)就是所有未包含在行內(nèi)元素中的字符串。比如說(shuō)案發(fā)現(xiàn)場(chǎng)的This is the......I hope that

em框：別名字符框(character box)。em框在字體中定義。em框在css中不可見，是一個(gè)比較抽象的概念。這里只需要知道font-size確定了各個(gè)em框高度即可

font-size：字體大小，與em框有關(guān)

內(nèi)容區(qū)：在行內(nèi)非替換元素中，內(nèi)容區(qū)是元素中各個(gè)字符的em框串在一起構(gòu)成的框。在行內(nèi)替換元素中，內(nèi)容區(qū)是元素的固有高度再加上可能有的外邊距、邊框和內(nèi)邊框。

行間距：line-height與font-size之差，這個(gè)差分為兩半，分別應(yīng)用到內(nèi)容區(qū)的頂部和底部。行間距只適用于行內(nèi)非替換元素。

行內(nèi)框：這個(gè)框通過(guò)向內(nèi)容區(qū)增加行間距來(lái)描述。對(duì)于非替換元素，元素行內(nèi)框的高度剛好等于line-height的值。對(duì)于替換元素，元素行內(nèi)框的高度恰好等于內(nèi)容區(qū)的高度，因?yàn)樾虚g距。

行框：這是包含該行中出現(xiàn)的行內(nèi)框的最高點(diǎn)和最低點(diǎn)的最小框。換句話說(shuō)，行框的上邊界要位于最高行內(nèi)框的上邊界，而行框的底邊要放在最低行內(nèi)框的下邊界。

非替換元素：如果元素的內(nèi)容包含在文檔中，則稱之為非替換元素。比如說(shuō)

Inner content
或
Inner content

替換元素：用作為其他內(nèi)容占位符的一個(gè)元素。比如說(shuō)

或者

重要提示：為了便于接下來(lái)的分析過(guò)程，請(qǐng)先了解他們的身份，然后帶著疑問(wèn)去參與分析。

首先是字體創(chuàng)建，該過(guò)程伴隨著em框的生成，這個(gè)框是不可見的。開發(fā)人員無(wú)法控制該框大小。

每一個(gè)字符的產(chǎn)生都代表em框的生成。（那么這些字符是如何擺放的？為什么是瀏覽器呈現(xiàn)給我們的樣式？人們寫字的時(shí)候總是不經(jīng)意間會(huì)寫歪，那么瀏覽器又是如何做到對(duì)齊）

所有字符都全部action后，em框連在一起形成了內(nèi)容區(qū)。這個(gè)區(qū)域依然不可見，很抽象。開發(fā)者無(wú)法直接控制，只能通過(guò)font-size間接影響em框從而影響內(nèi)容區(qū)的大小。大多數(shù)情況下可以認(rèn)為font-size大小即為內(nèi)容區(qū)大小。

內(nèi)容區(qū)生成后，行內(nèi)框也即將生成。這個(gè)時(shí)候，行間距吵鬧著要把自己分成兩半，一半放在內(nèi)容區(qū)的頭上，另一半下放在內(nèi)容的底部，這樣才顯得恩愛嘛。

當(dāng)愛情發(fā)生后總會(huì)產(chǎn)生些什么。于是行內(nèi)框就誕生了，內(nèi)容區(qū)和行間距的完美組合就是行內(nèi)框。行內(nèi)框是可見的。

所有的行內(nèi)框都出生后，就得按照一定的規(guī)則制造一個(gè)包容它們的容器了，這就是行框。既然要包含它們，那必然得照顧最高和最矮的那個(gè)了。

以上是一般案例的發(fā)生，圖解如下

代碼如下：

    

        This is the content of the element p. Here is inline element. I am glad that you  come to read here.I hope that 
        you can learn more from here . So  just code, it"s a great things. Let"s go!!!.
    

黃色和藍(lán)色區(qū)域代表內(nèi)容區(qū)（在這同時(shí)也表示行內(nèi)框），但如果line-height與font-size大小不一時(shí)，使用background添加顏色時(shí)，作用的是內(nèi)容區(qū)(content)。

溫馨提示：思考時(shí)可以先考慮這一行中有哪些元素，再參照上述過(guò)程進(jìn)行模擬。

有了以上的基礎(chǔ)后，這里便開始對(duì)兩個(gè)案件合并進(jìn)行透徹的剖析（因?yàn)閱?wèn)題牽扯的本質(zhì)是一樣的）。

代碼重溫：

    
        

            This is the content of the element p. Here is inline element. I am glad that you  come to read here.I hope that 
            you can learn more from here. So  just code, it"s a great things. Let"s go!!!.
        
    

效果重溫：

問(wèn)題重溫：匿名文本和strong標(biāo)簽的內(nèi)容是如何對(duì)齊的？line-height都是16px，第二行的間距還是那么大？

問(wèn)題解決：首先是對(duì)齊的問(wèn)題，關(guān)于行內(nèi)元素的對(duì)齊就不得不提到vertical-align屬性

瀏覽器代理（userAgentStylesheet）給所有行內(nèi)元素vertical-align的屬性默認(rèn)設(shè)置成了baseline。baseline這個(gè)屬性值要求元素的基線與父元素的基線對(duì)齊。

這張圖特意放大了

圖中紅色區(qū)域就是基線。css規(guī)范中對(duì)基線是否有明確規(guī)定？這一點(diǎn)我不太清楚。這里講下個(gè)人的理解吧，基線是字符的特有屬性，在字體被設(shè)計(jì)時(shí)就被確定好的。開發(fā)者無(wú)法控制。

由于userAgentStylesheet默認(rèn)vertical-align屬性值為baseline，所以它們就工整的對(duì)齊了。

第二個(gè)問(wèn)題，第二行間距為什么如此大？

line-height明明都是16px。

原因很簡(jiǎn)單，line-height在應(yīng)用到塊級(jí)元素時(shí)，它定義的是元素中文本基線之間的最小距離。也就是說(shuō)這不是一個(gè)固定死的數(shù)值，只是一個(gè)最低要求。

首先p標(biāo)簽是塊級(jí)元素，其次line-height設(shè)置的大小與匿名文本的font-size一樣，這導(dǎo)致內(nèi)容區(qū)與行內(nèi)框大小一致。然而對(duì)于strong標(biāo)簽里的文本來(lái)說(shuō)，由于行內(nèi)框小于內(nèi)容區(qū)的大小，且行內(nèi)框在內(nèi)容區(qū)垂直居中。

顏色強(qiáng)調(diào)

首先，每行的行框頂端是緊靠著上一行行框的底端。正如圖中所見，著色區(qū)域都是內(nèi)容區(qū)。因?yàn)榍叭械膄ont-size和line-height大小一致，所以行框即是著色區(qū)。但是第四行的內(nèi)容區(qū)并不等于行框大小。

多帶帶審視第四行，這里有兩個(gè)匿名行內(nèi)框(hope that 和can learn more)和一個(gè)行內(nèi)元素strong。一共三個(gè)行內(nèi)框，其中匿名行內(nèi)框的大小等于font-size，而strong標(biāo)簽的行內(nèi)框卻遠(yuǎn)小于內(nèi)容區(qū)的大小(font-size),由于行間距是對(duì)半上下分布的（參考案件模擬里的第四條），所以此時(shí)行內(nèi)框的位置是在內(nèi)容區(qū)是垂直居中的。

strong元素行內(nèi)框

按照行框的生成過(guò)程（案件模擬）來(lái)看，這里行框的頂端是由strong元素的行內(nèi)框頂端確定，底端則是有匿名文本的行內(nèi)框的底端確定。

圖中箭頭所指即為行高。

至此，已經(jīng)解決了對(duì)齊和為什么第二行間距如此大的問(wèn)題。

當(dāng)p標(biāo)簽中沒(méi)有任何內(nèi)容時(shí)，p的高度為0.當(dāng)p中隨意寫入文本時(shí)，p會(huì)生成一個(gè)高度。這并不是被文本撐起來(lái)的，而是行框、行內(nèi)框的作用。注意，通常情況下line-height有個(gè)默認(rèn)值1.2。
這里就不細(xì)講了，可以當(dāng)做思考題，希望對(duì)各位有幫助。

我的第一次給了segmentFault。。。嗚嗚