持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第2天，点击查看活动详情。

天天用可替换元素（replaced element），竟说不知道

一、写在前面

一次闲聊，一位三年前端，表示不知道可替换元素（replaced element），没印象，被起哄要降薪降级。

于是，决定小写一下【你所不知道的可替换元素（replaced element）】，话说回来日常开发中，可能很少用到可替换元素（replaced element），也称置换元素，这个术语。相比可替换元素这个名词，行内元素和块级元素的知名度，可能更高一些，相信随便抓个web前端，甚至程序员都能张口就来几个知名地行内元素和块级元素。

但是可替换元素，在实践中其实很常用，说一句 web前端天天用可替换元素，人们天天见可替换元素，都不为过。

img 就是典型的可替换元素，不少见吧，不少用吧。

那么下面来看下什么是可替换元素（replaced element），可替换元素都有哪些？

二、什么是可替换元素

Replaced element, 译为可替换元素，也有译作置换元素。

在 CSS 中，可替换元素（replaced element）的展现效果不是由 CSS 来控制的。这些元素是一种外部对象，它们外观的渲染，是独立于 CSS 的。

可替换元素（replaced element），是外观渲染独立于 CSS 的一种外部对象，它们的展示效果不是由 CSS 控制的，而是其内部内容控制的。例如典型的可替换元素 img，它内容色彩等并不由 css 控制，而是 img 的 src 带来的内容。

可替换元素同时具有行内元素和块级元素的一些特征，例如典型的行内元素 span 设置宽高是“无效”的，但是我们发现 img 设置宽高是会生效的，典型的块级元素一般都会占据独立的完整的一行空间，每个块级元素都会新开一行空间占据，而 img 则不一定会占据一整行空间。这些都说明了，像 img 这样的元素，如果单纯地归纳为行内元素或块级元素，可能不合适。那么第三种概念，可替换元素（replaced element）的出现，更好的代表了 img 这样的元素。

可替换元素有一个特征，那就是他们的内容通过某个属性（例如 img 的 src），来呈现内容，而不是像 div 或 span 那样，在标签之间添加内容。

tips：img 既是行内元素，也是可替换元素。

三、可替换元素有哪些

html 规范上说可以被视为替换元素的有：

audio,
canvas,
embed,
iframe,
img,
input,
object,
video。

developer.mozilla 上列明的典型的可替换元素只有下面几个：

iframe
video
embed
img

而其他元素是仅在特定情况下作为可替换元素处理：

option
audio
canvas
object
applet

HTML 规范也说了 input 元素可替换，因为 image 类型的 input 元素就像 img 一样可通过属性值替换内容， img 的是 src，input 则是 value。

但是其他形式的控制元素，包括其他类型（type）的 input 元素，被明确地列为非可替换元素（non-replaced elements）。

所以，如果强调典型的可替换元素，那么 iframe，video，embed，img 更合适作为代表。

四、可替换元素与 CSS

CSS 可以轻易改变一个块级元素和 div 和行内元素 span 的文本内容，例如字体种类，字号大小以及字体颜色等。

而可替换元素的内容不受文档样式影响，文档样式不会影响到可替换元素自身的内容（如果有人提 CSS 的滤镜效果，那可能要另外讨论），当然 CSS 是能够改变可替换元素的空间位置的。典型的可替换元素 img 和 iframe，它们有一些特性，像是内容由某个属性值（src）决定，而不受 CSS 样式影响。

像 CSS 中的 fontSize 和 color 是可继承属性，这种可继承性在行内元素 span 和块级元素 div 上都好使，但在可替换元素上则未必好使，例如典型的可替换元素 iframe，它可以有自己的文档样式，且不会继承父文档的样式。

下面是关于 CSS 中的可继承属性 fontSize 和 color，在行内元素、块级元素和可替换元素的表现。

下面是一则来自 Mozilla 的提示： CSS 能对可替换元素产生的唯一影响在于，部分属性支持控制元素内容在其框中的位置或定位方式。 CSS 在某些情况下会对可替换元素做一些特殊处理，比如计算外边距（margin）和一些 auto 的具体值。需要注意的是，一部分（并非全部）可替换元素，其本身具有的尺寸和基线（baseline）会被一些 CSS 属性用到，加入计算之中，例如 vertical-align。只有可替换元素才能具有这种自带值。