CSS可替換元素是什么

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

什么是可替換元素？

在 CSS 中，可替換元素（replaced element）的展現(xiàn)效果不是由 CSS 來控制的。這些元素是一種外部對(duì)象，它們外觀的渲染，是獨(dú)立于 CSS 的。

簡單來說，它們的內(nèi)容不受當(dāng)前文檔的樣式的影響。CSS 可以影響可替換元素的位置，但不會(huì)影響到可替換元素自身的內(nèi)容。某些可替換元素，例如 <iframe> 元素，可能具有自己的樣式表，但它們不會(huì)繼承父文檔的樣式。

其他的可替換元素

1. 典型的可替換元素

<iframe>

<video>

<embed>

<img>

2. 僅在特定情況下被作為可替換元素處理

<option>

<audio>

<canvas>

<object>

<applet>

3. 特殊的 <input>

HTML 規(guī)范說明了 <input> 元素可替換，因?yàn)?"image" 類型的 <input> 元素就像 <img> 一樣被替換。但是其他形式的控制元素，包括其他類型的 <input> 元素，被明確地列為非可替換元素（non-replaced elements）。

4. CSS 屬性中的 content

用 CSS content 屬性插入的對(duì)象是匿名的可替換元素。它們并不存在于 HTML 標(biāo)記中，因此是“匿名的”。

標(biāo)簽 <img> 的權(quán)威定義

這里還是要引用 MDN 的解釋：

<img> 是一個(gè)可替換元素。它的 display 屬性的默認(rèn)值是 inline，但是它的默認(rèn)分辨率是由被嵌入的圖片的原始寬高來確定的，使得它就像 inline-block 一樣。你可以為 設(shè)置 border/border-radius、padding/margin、width、height 等等的 CSS 屬性。

<img> 沒有基線（baseline），這意味著，當(dāng)在一個(gè)行內(nèi)格式的上下文（an inline formatting context）中使用 vertical-align: baseline 時(shí)，圖像的底部將會(huì)與容器的文字基線對(duì)齊。

CSS 在某些情況下會(huì)對(duì)可替換元素做一些特殊處理，比如計(jì)算外邊距（margin）和一些 auto 的具體值。這就是為什么插入圖片的時(shí)候，還同時(shí)需要設(shè)置一些 CSS 屬性，否則總會(huì)出現(xiàn)一些你意料之外的表現(xiàn)。

感謝各位的閱讀，以上就是“CSS可替換元素是什么”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對(duì)CSS可替換元素是什么這一問題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！