資訊專欄INFORMATION COLUMN
摘要：簡單來說就是所有未包含在行內(nèi)元素中的字符串。在行內(nèi)替換元素中，內(nèi)容區(qū)是元素的固有高度再加上可能有的外邊距邊框和內(nèi)邊框。行內(nèi)框是可見的。
案發(fā)
1.這些文字是如何擺放這么整齊的？為什么這個龐然大物的底部能對齊，頂部沒對齊？為什么第二行與第一行的間距那么大？
2.為什么光禿禿的p標(biāo)簽沒有高度，為什么在p標(biāo)簽中寫入文字就有高度了呢？真的是因為文字大小撐起來的嗎？
取證vertical-align是主謀之一，使得龐然大物的底部對齊
line-height是另一主謀，導(dǎo)致頂部沒對齊以及巨大間距和p高度
匿名文本、em框，font-size,內(nèi)容區(qū)，行間距,行內(nèi)框，行框，行內(nèi)非替換元素間接或直接參與了犯罪
分析場景回顧
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。簡單來說就是所有未包含在行內(nèi)元素中的字符串。比如說案發(fā)現(xiàn)場的This is the......I hope that
em框：別名字符框(character box)。em框在字體中定義。em框在css中不可見，是一個比較抽象的概念。這里只需要知道font-size確定了各個em框高度即可
font-size：字體大小，與em框有關(guān)
內(nèi)容區(qū)：在行內(nèi)非替換元素中，內(nèi)容區(qū)是元素中各個字符的em框串在一起構(gòu)成的框。在行內(nèi)替換元素中，內(nèi)容區(qū)是元素的固有高度再加上可能有的外邊距、邊框和內(nèi)邊框。
行間距：line-height與font-size之差，這個差分為兩半，分別應(yīng)用到內(nèi)容區(qū)的頂部和底部。行間距只適用于行內(nèi)非替換元素。
行內(nèi)框：這個框通過向內(nèi)容區(qū)增加行間距來描述。對于非替換元素，元素行內(nèi)框的高度剛好等于line-height的值。對于替換元素，元素行內(nèi)框的高度恰好等于內(nèi)容區(qū)的高度，因為行間距。
行框：這是包含該行中出現(xiàn)的行內(nèi)框的最高點和最低點的最小框。換句話說，行框的上邊界要位于最高行內(nèi)框的上邊界，而行框的底邊要放在最低行內(nèi)框的下邊界。
非替換元素：如果元素的內(nèi)容包含在文檔中，則稱之為非替換元素。比如說
Inner content
或Inner content
替換元素：用作為其他內(nèi)容占位符的一個元素。比如說
或者
重要提示：為了便于接下來的分析過程，請先了解他們的身份，然后帶著疑問去參與分析。
模擬作案首先是字體創(chuàng)建，該過程伴隨著em框的生成，這個框是不可見的。開發(fā)人員無法控制該框大小。
每一個字符的產(chǎn)生都代表em框的生成。（那么這些字符是如何擺放的？為什么是瀏覽器呈現(xiàn)給我們的樣式？人們寫字的時候總是不經(jīng)意間會寫歪，那么瀏覽器又是如何做到對齊）
所有字符都全部action后，em框連在一起形成了內(nèi)容區(qū)。這個區(qū)域依然不可見，很抽象。開發(fā)者無法直接控制，只能通過font-size間接影響em框從而影響內(nèi)容區(qū)的大小。大多數(shù)情況下可以認(rèn)為font-size大小即為內(nèi)容區(qū)大小。
內(nèi)容區(qū)生成后，行內(nèi)框也即將生成。這個時候，行間距吵鬧著要把自己分成兩半，一半放在內(nèi)容區(qū)的頭上，另一半下放在內(nèi)容的底部，這樣才顯得恩愛嘛。
當(dāng)愛情發(fā)生后總會產(chǎn)生些什么。于是行內(nèi)框就誕生了，內(nèi)容區(qū)和行間距的完美組合就是行內(nèi)框。行內(nèi)框是可見的。
所有的行內(nèi)框都出生后，就得按照一定的規(guī)則制造一個包容它們的容器了，這就是行框。既然要包含它們，那必然得照顧最高和最矮的那個了。
以上是一般案例的發(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!!!.
黃色和藍色區(qū)域代表內(nèi)容區(qū)（在這同時也表示行內(nèi)框），但如果line-height與font-size大小不一時，使用background添加顏色時，作用的是內(nèi)容區(qū)(content)。
溫馨提示：思考時可以先考慮這一行中有哪些元素，再參照上述過程進行模擬。
案件實戰(zhàn)有了以上的基礎(chǔ)后，這里便開始對兩個案件合并進行透徹的剖析（因為問題牽扯的本質(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!!!.
效果重溫：
問題重溫：匿名文本和strong標(biāo)簽的內(nèi)容是如何對齊的？line-height都是16px，第二行的間距還是那么大？
問題解決：首先是對齊的問題，關(guān)于行內(nèi)元素的對齊就不得不提到vertical-align屬性
瀏覽器代理（userAgentStylesheet）給所有行內(nèi)元素vertical-align的屬性默認(rèn)設(shè)置成了baseline。baseline這個屬性值要求元素的基線與父元素的基線對齊。
這張圖特意放大了
圖中紅色區(qū)域就是基線。css規(guī)范中對基線是否有明確規(guī)定？這一點我不太清楚。這里講下個人的理解吧，基線是字符的特有屬性，在字體被設(shè)計時就被確定好的。開發(fā)者無法控制。
由于userAgentStylesheet默認(rèn)vertical-align屬性值為baseline，所以它們就工整的對齊了。
第二個問題，第二行間距為什么如此大？
line-height明明都是16px。
原因很簡單，line-height在應(yīng)用到塊級元素時，它定義的是元素中文本基線之間的最小距離。也就是說這不是一個固定死的數(shù)值，只是一個最低要求。
首先p標(biāo)簽是塊級元素，其次line-height設(shè)置的大小與匿名文本的font-size一樣，這導(dǎo)致內(nèi)容區(qū)與行內(nèi)框大小一致。然而對于strong標(biāo)簽里的文本來說，由于行內(nèi)框小于內(nèi)容區(qū)的大小，且行內(nèi)框在內(nèi)容區(qū)垂直居中。
顏色強調(diào)
首先，每行的行框頂端是緊靠著上一行行框的底端。正如圖中所見，著色區(qū)域都是內(nèi)容區(qū)。因為前三行的font-size和line-height大小一致，所以行框即是著色區(qū)。但是第四行的內(nèi)容區(qū)并不等于行框大小。
多帶帶審視第四行，這里有兩個匿名行內(nèi)框(hope that 和can learn more)和一個行內(nèi)元素strong。一共三個行內(nèi)框，其中匿名行內(nèi)框的大小等于font-size，而strong標(biāo)簽的行內(nèi)框卻遠小于內(nèi)容區(qū)的大小(font-size),由于行間距是對半上下分布的（參考案件模擬里的第四條），所以此時行內(nèi)框的位置是在內(nèi)容區(qū)是垂直居中的。
strong元素行內(nèi)框
按照行框的生成過程（案件模擬）來看，這里行框的頂端是由strong元素的行內(nèi)框頂端確定，底端則是有匿名文本的行內(nèi)框的底端確定。
圖中箭頭所指即為行高。
至此，已經(jīng)解決了對齊和為什么第二行間距如此大的問題。
當(dāng)p標(biāo)簽中沒有任何內(nèi)容時，p的高度為0.當(dāng)p中隨意寫入文本時，p會生成一個高度。這并不是被文本撐起來的，而是行框、行內(nèi)框的作用。注意，通常情況下line-height有個默認(rèn)值1.2。
這里就不細講了，可以當(dāng)做思考題，希望對各位有幫助。
我的第一次給了segmentFault。。。嗚嗚
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/111277.html
摘要：此元素將顯示為塊級元素，此元素前后會帶有換行符。新增的值此元素會作為列表顯示。塊級元素和行內(nèi)元素的分類中的塊級元素標(biāo)簽描述定義地址。定義圍繞表單中元素的邊框。定義預(yù)定義范圍內(nèi)的度量。定義針對不支持框架的用戶的替代內(nèi)容。定義表格中的單元。 標(biāo)簽（空格分隔）： CSS 在html中元素主要分為行內(nèi)元素和塊級元素 行內(nèi)元素 [x] 不獨占一行 [x] 書寫完成后不會自動換行 [x] 沒...
摘要：此元素將顯示為塊級元素，此元素前后會帶有換行符。新增的值此元素會作為列表顯示。塊級元素和行內(nèi)元素的分類中的塊級元素標(biāo)簽描述定義地址。定義圍繞表單中元素的邊框。定義預(yù)定義范圍內(nèi)的度量。定義針對不支持框架的用戶的替代內(nèi)容。定義表格中的單元。 標(biāo)簽（空格分隔）： CSS 在html中元素主要分為行內(nèi)元素和塊級元素 行內(nèi)元素 [x] 不獨占一行 [x] 書寫完成后不會自動換行 [x] 沒...
摘要：浮動元素會從文檔的正常流簡稱文檔流中脫離，但仍會影響布局。五清除浮動和中對工作是這樣描述的增加元素的上外邊距，使之最后落在浮動元素的下面。清除區(qū)域時在元素的上外邊距增加的額外間隔，不允許任何浮動元素進入這個范圍內(nèi)。 內(nèi)容預(yù)覽 包含塊 浮動元素的特性 浮動元素的擺放規(guī)則 浮動元素的幾種行為 清除浮動 一、包含塊 所有元素的布局都是依賴于包含塊的。 舉個例子來說 ...
摘要：部分樣式代碼總結(jié)因為用的不多其他對齊方式并沒有舉例。 起因 內(nèi)容垂直居中在前端布局中, 是經(jīng)常遇到的需求。雖然可以用 浮動 float、position:absolute、 來解決, 不過文檔流都會受到影響。筆者常用的是 flex, 用起來順手, 有些地方用起來感覺小題大做, 于是就來探究一下 vertical-align 如何做到居中布局。 初探 要明白 vertical-align...
摘要：部分樣式代碼總結(jié)因為用的不多其他對齊方式并沒有舉例。 起因 內(nèi)容垂直居中在前端布局中, 是經(jīng)常遇到的需求。雖然可以用 浮動 float、position:absolute、 來解決, 不過文檔流都會受到影響。筆者常用的是 flex, 用起來順手, 有些地方用起來感覺小題大做, 于是就來探究一下 vertical-align 如何做到居中布局。 初探 要明白 vertical-align...
閱讀 2076·2019-08-30 15:52
閱讀 3062·2019-08-29 16:09
閱讀 1381·2019-08-28 18:30
閱讀 2517·2019-08-26 12:24
閱讀 1162·2019-08-26 12:12
閱讀 2324·2019-08-26 10:45
閱讀 629·2019-08-23 17:52
閱讀 966·2019-08-23 16:03
