HTML+CSS35 可替換元素

一道面試題

在美團面試的時候遇到過這樣一個小問題：

Q：你知道行內元素和塊級元素有什麼區別嗎？

A：行內元素只會佔據內部元素寬度的空間，而且不會以新的一行開始，不能設置寬度；塊級元素會佔滿整個父容器，會新起一行，能夠設置寬度；

Q：<img>是什麼元素？

A: 行內元素

Q：那爲何<img>能夠設置寬度？

A：呃.....

答不出來了。實際上是一個很基礎的問題，可是因爲不少時候對基礎，尤爲是CSS/HTML方面的基礎不甚在乎，稀裏糊塗也能實現想要的效果，不求甚解，真的刨根問題的時候就傻眼了。

先給出答案：由於<img>雖然是行內元素，可是它們也都屬於可替換元素。可替換元素通常有內在尺寸和寬高比，因此能夠設置寬度和高度

可替換元素

從元素自己的特色來講能夠分爲可替換元素和不可替換元素

HTML大多數元素都是不可替換元素，內容直接由DOM內容肯定，直接展示給用戶，好比<p>123</p>，這就是一個不可替換元素，展現的內容就是DOM的文本節點123

與之不一樣的就是可替換元素，具體顯示的內容是由元素的標籤和屬性肯定的，好比<img>顯示的內容其實是由src屬性的值來讀取圖片的信息並展現的

典型的可替換元素：

• <iframe>
• <video>
• <embed>
• <img>

HTML規範規定了<input>元素可替換，由於<image>類型的<input>元素就像<img>同樣可替換，可是其餘類型的<input>被明確的列爲非可替換元素（來源：MDN，可是實際上好比type爲text的<input>也是能夠設置寬度的，我認爲能夠將<input>也理解爲條可替換元素，由於其展現形式也是與type屬性的取值有關係的）

幾乎全部的替換元素都是行內元素，替換元素有內在尺寸，因此能夠設置width和height。若是不設置其寬度和高度時，就按照其內在尺寸顯示。

控制可替換元素中的對象尺寸和位置

能夠使用某些CSS屬性來指定可替換元素中包含的內容對象，在該元素的和區域內的位置的位置和定義方式，好比：

object-fit用來指定可替換元素的內容對象在元素盒區域內的填充方式（相似於background-size），取值有contain、cover、fill、none、scale-down

img {
  border: 1px solid red;
  width: 200px;
  height: 100px;
  object-fit: fill; /* 默認值 */
}
複製代碼

object-position用來指定可替換元素的內容對象在盒元素區域中的位置：

參考

• Q:爲什麼img、input等內聯元素可設置寬高@掘金
• 可替換元素@MDN