80%的前端會答錯的問題：是什麼元素？

前言

某天晚上，和幾個朋友去擼串，忽然就聊到了面試，都在感嘆如今的面試題太變態了，其中一個忽然很神祕的問我：「你寫前端這麼久了，那你知道 <img> 是什麼元素嗎？」

因而我結合平時寫頁面的經驗，脫口答道：「應該是內聯元素吧。」但說出來就後悔了，由於確定沒那麼簡單。

果真，他像「非洲大山」穆託姆博那樣對我搖了搖指頭。

因而我回去就查了一下，發現答案還不是那麼明朗，如下是百度和谷歌的結果：

但經過圖中能夠發現，都提到了一個詞：替換。因而我去了更權威的 MDN web docs，尋找替換元素 的定義。

正文

什麼是可替換元素？

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

簡單來講，它們的內容不受當前文檔的樣式的影響。CSS 能夠影響可替換元素的位置，但不會影響到可替換元素自身的內容。某些可替換元素，例如 <iframe> 元素，可能具備本身的樣式表，但它們不會繼承父文檔的樣式。

其餘的可替換元素

1. 典型的可替換元素

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

2. 僅在特定狀況下被做爲可替換元素處理

• <option>
• <audio>
• <canvas>
• <object>
• <applet>

3. 特殊的 <input>

HTML 規範說明了 <input> 元素可替換，由於 "image" 類型的 <input> 元素就像 <img> 同樣被替換。可是其餘形式的控制元素，包括其餘類型的 <input> 元素，被明確地列爲非可替換元素（non-replaced elements）。

4. CSS 屬性中的 content

用 CSS content 屬性插入的對象是匿名的可替換元素。它們並不存在於 HTML 標記中，所以是「匿名的」。

標籤 <img> 的權威定義

這裏仍是要引用 MDN 的解釋：

<img> 是一個可替換元素。它的 display 屬性的默認值是 inline，可是它的默認分辨率是由被嵌入的圖片的原始寬高來肯定的，使得它就像 inline-block 同樣。你能夠爲 設置 border/border-radius、padding/margin、width、height 等等的 CSS 屬性。

<img> 沒有基線（baseline），這意味着，當在一個行內格式的上下文（an inline formatting context）中使用 vertical-align: baseline 時，圖像的底部將會與容器的文字基線對齊。

CSS 在某些狀況下會對可替換元素作一些特殊處理，好比計算外邊距（margin）和一些 auto 的具體值。這就是爲何插入圖片的時候，還同時須要設置一些 CSS 屬性，不然總會出現一些你意料以外的表現。

結尾

在起標題的時候很糾結，由於也許會有不少讀者能回答上來，或許是我孤陋寡聞了。但我問了幾個（前）同事、朋友，他們都沒有很完整的回答出來，因此最後仍是決定使用這個標題，畢竟符合「二八定律」，若是有標題黨的嫌疑，還請各位見諒。

可是，寫頁面這麼久，包括平時的交流中，還真沒深刻討論過這個問題，也多是看某本書時提到過，但印象不深吧，直到被當作面試題來問。

這裏再次暴露了一個現象級問題：面試到底應該問什麼？

「面試造火箭，進去切圖片」是近年前端面試的痛點，甚至去年面試過一家，筆試題裏面竟然有軟件工程題和項目管理題，而後面試官還各類裝X，說他很看中基礎，公司是某個集團旗下的子公司，而後就他不知道哪一個網站 copy 的智商題大談本身的理解（好像是什麼獨木橋、兩個手電筒，幾我的，每一個人過橋時間不同，沒有光照就 GG，求最佳過橋策略）。而後我心想：「我就是來面試前端的，跟我扯那麼多有的沒的是在幹啥？還扯到項目管理，究竟是招程序員仍是招項目經理？」環顧四周，其實也就是個工廠改造的創業基地，面試的地方還堆了各類雜物……真是廟小妖風大，池淺王八多，拜拜您吶。

我的以爲，若是是招聘有經驗的開發崗，應該多問問項目經驗以及遇到問題的解決思路，這種無法靠背面試題來忽悠，而不是翻故紙堆，問「回」字有幾種寫法這種「孔乙己」式問題。

這類問題，看過就知道，沒看就不知道，對項目的幫助微乎其微，除非面試的是架構師、算法崗這類須要很深的理論研究的。但據我觀察，市場上絕大多數的前端，招進來就是寫頁面（除了大廠），並且在團隊中也是很卑微的存在，重要性遠比不上後端（這就是現狀，由於不少領導、總監都是後端出身，對前端不那麼重視）。

因此，面試的時候，少一些套路，多一些真誠很差嗎？

最後，仍是要引用一下 Linus 大神的名言：「屁話少說，放碼過來。」

我是布拉德特皮，一個只能大器晚成的落魄前端

·