持续创作,加速成长!这是我参与「掘金日新计划 · 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。只有可替换元素才能具有这种自带值。