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 大神的名言：「屁話少說，放碼過來。」

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

源自：https://juejin.im/post/5e25491f51882536c964ef2f

聲明：文章著作權歸作者所有，如有侵權，請聯繫小編刪除。