什么是替换元素
所谓可替换元素(replaced element),是指一些展现效果不由 CSS 来控制的元素。这些元素是一种外部对象,它们外观的渲染,是独立于 CSS 的。
简单来说,它们的内容不受当前文档的样式的影响。CSS 可以影响可替换元素的位置,但不会影响到可替换元素自身的内容。某些可替换元素,例如 <iframe>
元素,可能具有自己的样式表,但它们不会继承父文档的样式。
与替换元素相对应的,就是非替换元素,顾名思义就是那些样式完全由 CSS 来控制的元素,例如 p,h1~h6 等。
更多可替换元素内容可以参阅 MDN:https://developer.mozilla.org/zh-CN/docs/Web/CSS/Replaced_element
常见的替换元素
- 图片标签 img,它在页面中显示出的效果主要取决于你连接的是什么图片,图片是什么它就展示什么,CSS 虽然可以控制图片的尺寸位置,但永远无法控制图片本身。
- 内联框架 iframe
- 音频视频标签
- select 元素也是一个典型的可替换元素,它在页面上呈现的是用户操作系统上的下拉列表样式,因此,它的展现效果是由操作系统决定的。所以,同一个 select 元素,放到不同操作系统的电脑上会呈现不同的外观。