行內元素的一些探究

時間 2019-11-07

標籤元素一些探究简体版

原文原文鏈接

案發

1.這些文字是如何擺放這麼整齊的？爲何這個龐然大物的底部能對齊，頂部沒對齊？爲何第二行與第一行的間距那麼大？css

2.爲何光禿禿的p標籤沒有高度，爲何在p標籤中寫入文字就有高度了呢？真的是由於文字大小撐起來的嗎？瀏覽器

取證

vertical-align是主謀之一，使得龐然大物的底部對齊字體
line-height是另外一主謀，致使頂部沒對齊以及巨大間距和p高度spa
匿名文本、em框，font-size,內容區，行間距,行內框，行框，行內非替換元素間接或直接參與了犯罪設計

分析

場景回顧3d

<body style="padding:0 400px;border:1px solid #000">
    <p style="font-size:16px;line-height:16px;">
        This is the content of the element p. Here is inline element. I am glad that you  come to read here.I hope that 
        <strong style="font-size:40px;">you</strong> can learn more from here. So  just code, it's a great things. Let's go!!!.
    </p>
</body>

身份鑑定

匿名文本：英文名anonymous text。簡單來講就是全部未包含在行內元素中的字符串。好比說案發現場的This is the......I hope that代理
em框：別名字符框(character box)。em框在字體中定義。em框在css中不可見，是一個比較抽象的概念。這裏只須要知道font-size肯定了各個em框高度便可code
font-size：字體大小，與em框有關blog
內容區：在行內非替換元素中，內容區是元素中各個字符的em框串在一塊兒構成的框。在行內替換元素中，內容區是元素的固有高度再加上可能有的外邊距、邊框和內邊框。ip
行間距：line-height與font-size之差，這個差分爲兩半，分別應用到內容區的頂部和底部。行間距只適用於行內非替換元素。
行內框：這個框經過向內容區增長行間距來描述。對於非替換元素，元素行內框的高度恰好等於line-height的值。對於替換元素，元素行內框的高度剛好等於內容區的高度，由於行間距。
行框：這是包含該行中出現的行內框的最高點和最低點的最小框。換句話說，行框的上邊界要位於最高行內框的上邊界，而行框的底邊要放在最低行內框的下邊界。
非替換元素：若是元素的內容包含在文檔中，則稱之爲非替換元素。好比說
```
<p>Inner content</p>或<div>Inner content</div>
```
替換元素：用做爲其餘內容佔位符的一個元素。好比說
```
<img src="test.gif" />或者<input type="radio" />
```

重要提示：爲了便於接下來的分析過程，請先了解他們的身份，而後帶着疑問去參與分析。

模擬做案

首先是字體建立，該過程伴隨着em框的生成，這個框是不可見的。開發人員沒法控制該框大小。
每個字符的產生都表明em框的生成。（那麼這些字符是如何擺放的？爲何是瀏覽器呈現給咱們的樣式？人們寫字的時候老是不經意間會寫歪，那麼瀏覽器又是如何作到對齊）
全部字符都所有action後，em框連在一塊兒造成了內容區。這個區域依然不可見，很抽象。開發者沒法直接控制，只能經過font-size間接影響em框從而影響內容區的大小。大多數狀況下能夠認爲font-size大小即爲內容區大小。
內容區生成後，行內框也即將生成。這個時候，行間距吵鬧着要把本身分紅兩半，一半放在內容區的頭上，另外一半下放在內容的底部，這樣才顯得恩愛嘛。
當愛情發生後總會產生些什麼。因而行內框就誕生了，內容區和行間距的完美組合就是行內框。行內框是可見的。
全部的行內框都出生後，就得按照必定的規則製造一個包容它們的容器了，這就是行框。既然要包含它們，那必然得照顧最高和最矮的那個了。

以上是通常案例的發生，圖解以下

代碼以下：

<body style="padding:0 400px;border:1px solid #000">
    <p style="font-size:16px;line-height:16px;background:#af3;border:1px solid red">
        This is the content of the element p. Here is inline element. I am glad that you  come to read here.I hope that 
        <strong style="background:yellow;">you can learn more from here</strong> . So  just <span style="background:blue">code, it's a great things. Let's go!!!.</span>
    </p>
</body>

黃色和藍色區域表明內容區（在這同時也表示行內框），但若是line-height與font-size大小不一時，使用background添加顏色時，做用的是內容區(content)。

舒適提示：思考時能夠先考慮這一行中有哪些元素，再參照上述過程進行模擬。

案件實戰

有了以上的基礎後，這裏便開始對兩個案件合併進行透徹的剖析（由於問題牽扯的本質是同樣的）。

代碼重溫：

<body style="padding:0 400px;border:1px solid #000">
        <p style="font-size:16px;line-height:16px;">
            This is the content of the element p. Here is inline element. I am glad that you  come to read here.I hope that 
            <strong style="font-size:40px;">you</strong> can learn more from here. So  just code, it's a great things. Let's go!!!.
        </p>
    </body>

效果重溫：

問題重溫：匿名文本和strong標籤的內容是如何對齊的？line-height都是16px，第二行的間距仍是那麼大？

問題解決：首先是對齊的問題，關於行內元素的對齊就不得不提到vertical-align屬性

瀏覽器代理（userAgentStylesheet）給全部行內元素vertical-align的屬性默認設置成了baseline。baseline這個屬性值要求元素的基線與父元素的基線對齊。

這張圖特地放大了

圖中紅色區域就是基線。css規範中對基線是否有明確規定？這一點我不太清楚。這裏講下我的的理解吧，基線是字符的特有屬性，在字體被設計時就被肯定好的。開發者沒法控制。

因爲userAgentStylesheet默認vertical-align屬性值爲baseline，因此它們就工整的對齊了。

第二個問題，第二行間距爲何如此大？

line-height明明都是16px。

緣由很簡單，line-height在應用到塊級元素時，它定義的是元素中文本基線之間的最小距離。也就是說這不是一個固定死的數值，只是一個最低要求。

首先p標籤是塊級元素，其次line-height設置的大小與匿名文本的font-size同樣，這致使內容區與行內框大小一致。然而對於strong標籤裏的文原本說，因爲行內框小於內容區的大小，且行內框在內容區垂直居中。

顏色強調

首先，每行的行框頂端是緊靠着上一行行框的底端。正如圖中所見，着色區域都是內容區。由於前三行的font-size和line-height大小一致，因此行框便是着色區。可是第四行的內容區並不等於行框大小。

單獨審視第四行，這裏有兩個匿名行內框(hope that 和can learn more)和一個行內元素strong。一共三個行內框，其中匿名行內框的大小等於font-size，而strong標籤的行內框卻遠小於內容區的大小(font-size),因爲行間距是對半上下分佈的（參考案件模擬裏的第四條），因此此時行內框的位置是在內容區是垂直居中的。

strong元素行內框