CSS可替換元素是什么

這篇文章主要講解了“CSS可替換元素是什么”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“CSS可替換元素是什么”吧！

什么是可替換元素？

在 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 屬性，否則總會出現一些你意料之外的表現。

感謝各位的閱讀，以上就是“CSS可替換元素是什么”的內容了，經過本文的學習后，相信大家對CSS可替換元素是什么這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！