什麼是可替換元素？

最近在羣聊裏偶然看到有位仁兄發了張今日頭條前端面試題的截圖，其中關於 HTML 的只有一題，以下：

請問什麼是可替換元素和非可替換元素，它們的差別是什麼？並舉例說明。

前端面試中 HTML 的題目原本就最少，並且並不難，翻來覆去也就那幾樣。咱們以前已經談到過最經典的 HTML 語義化 ，今天就藉此機會來談談可替換元素。

釋義

什麼是可替換元素？顧名思義，就是會被替換的元素。😅 （尬笑……

好比一個典型的可替換元素 img：

<img src=xxx.jpg>
複製代碼

咱們並無在 img 標籤中寫入任何內容，那它的內容從哪裏來的呢？

是瀏覽器去下載 src 屬性給到的圖片，並用該圖片資源替換掉 img 標籤，並且瀏覽器在下載前並不知道圖片的寬高。因此，可替換元素比較特殊，它的寬高是由其加載的內容決定的。（固然 CSS 能夠覆蓋其樣式）

示例

仍是用 img 標籤舉幾個例子：

<img src="https://avatars2.githubusercontent.com/u/17703242?s=460&v=4">
複製代碼

該圖片在頁面中展示出來的話，就是圖片自己自己的寬高。

img 元素也支持 width 和 height 屬性：

<img width="80" height="80" src="https://avatars2.githubusercontent.com/u/17703242?s=460&v=4">
複製代碼

此時該元素展示出來就是寬高爲 80 像素。

若是咱們再用 CSS 去覆蓋其樣式：

img {
  width: 60px;
  height: 60px;
}
複製代碼

該元素的展示即爲 60 像素。

MDN 的釋義

看過上面的例子以後咱們再來理解概念性的知識就比較容易了。

可替換元素（replaced element）的展示效果不是由 CSS 來控制的。這些元素是一種外部對象，它們外觀的渲染，是獨立於 CSS 的。

簡單來講，它們的內容不受當前文檔的樣式的影響。CSS 能夠影響可替換元素的位置，但不會影響到可替換元素自身的內容。

典型的可替換元素有 <iframe> <video> <embed> <img> ，還有一些元素僅在特定狀況下被做爲可替換元素處理，好比 <input> 。

瞭解更多能夠戳 這裏 。

（完）