可替換元素是什麼？ （附範例）

這篇文章帶給大家的內容是關於可替換元素是什麼？ （附範例），有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。

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

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

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

釋義

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

例如一個典型的可替換元素 img：

<img  src="/static/imghwm/default1.png" data-src="https://avatars2.githubusercontent.com/u/17703242?s=460&v=4" class="lazy" alt="可替換元素是什麼？ （附範例）" >

我們並沒有在img 標籤中寫入任何內容，那它的內容從哪裡來的呢？

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

##示例

##。 還是用

img

標籤舉幾個例子：

<img  src="/static/imghwm/default1.png" data-src="https://avatars2.githubusercontent.com/u/17703242?s=460&v=4" class="lazy" alt="可替換元素是什麼？ （附範例）" >

該圖片在頁面中展現出來的話，就是圖片本身本身的寬高。

# #img

元素也支援

width 和height

屬性：

<img  src="/static/imghwm/default1.png" data-src="https://avatars2.githubusercontent.com/u/17703242?s=460&v=4" class="lazy" alt="可替換元素是什麼？ （附範例）" >

此時該元素展現出來就是寬高為80 像素。

#如果我們再用CSS 去覆蓋其樣式：

img {
  width: 60px;
  height: 60px;
}

該元素的展現即為60 像素。

MDN 的釋義

看過上面的例子之後我們再來理解概念性的知識就比較容易了。可替換元素（replaced element）的展現效果不是由CSS來控制的。這些元素是一種外部對象，它們外觀的渲染，是獨立於CSS 的。簡單來說，它們的內容不受當前文檔的樣式的影響。CSS 可以影響可替換元素的位置，但不會影響可替換元素本身的內容。##典型的可替換元素有

以上是可替換元素是什麼？ （附範例）的詳細內容。更多資訊請關注PHP中文網其他相關文章！