🗒️替换元素

replaced elements

1. 典型的替换元素

   • <img>, <video>

   • <iframe>, <embed>

2. 仅在特定情况下才被视为替换元素

   • <audio>

   • <canvas>

   • <option>

   • <object>, <applet>

   • <input type="image"> 是类似于 <img> 的替换元素

     • 除这个之外的所有表单控件，包括其它 type 的 <input> 元素，被明确列为不可替换元素

3. 用 CSS 的 content 属性插入的对象是匿名替换对象

   • 之所以是匿名的，是因为它们不存在于 HTML 标记中

   • content 属性用生成的值替换元素

在 CSS 中，替换元素是外部对象，其显示（representation）是独立于 CSS 格式化模型的。CSS 可以影响替换元素的显示位置，但不能影响替换元素本身的内容。

1. 一些替换元素（比如 <iframe>）可能有自己的样式表，但它们并不继承父文档的样式。

2. CSS 对替换元素的唯一影响，就是有些属性可以控制替换元素（所包含的 object）在其 content box 里的定位。CSS Images 规范定义了：

   • object-fit 指定替换元素的 content object 如何适应包含元素的 box

   • object-position 指定替换元素的 content object 在元素框内的对齐方式

3. 一些替换元素还具有 intrinsic dimensions（固有尺寸/内在尺寸/内在维度）或定义的基线，我们也可以使用特定的 CSS 属性来控制它们，比如 vertical-align。

https://developer.mozilla.org/en-US/docs/Web/CSS/Replaced_element