翻译正在进行中。

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

简单来说,它们的内容不受当前文档的样式的影响。CSS 可以影响可替换元素的位置,但不会影响到可替换元素自身的内容。某些可替换元素,例如 <iframe> 元素,可能具有自己的样式表,但它们不会继承父文档的样式。

CSS 能对可替换元素产生的唯一影响在于,部分属性支持控制元素内容在其框中的位置或定位方式。有关详细信息,请参阅本文下面的控制内容框中的对象位置

可替换元素

典型的可替换元素有:

有些元素仅在特定情况下被作为可替换元素处理,例如:

HTML 规范也说了 <input> 元素可替换,因为 "image" 类型的 <input> 元素就像<img>一样被替换。但是其他形式的控制元素,包括其他类型的 <input> 元素,被明确地列为非可替换元素(non-replaced elements)。该规范用术语小挂件(Widgets)来描述它们默认的限定平台的渲染行为。

用 CSS content 属性插入的对象是匿名的可替换元素。它们并不存在于 HTML 标记中,因此是“匿名的”。

CSS 与可替换元素

CSS 在某些情况下会对可替换元素做一些特殊处理,比如计算外边距(margin)和一些 auto 的具体值。

需要注意的是,一部分(并非全部)可替换元素,其本身具有的尺寸和基线(baseline)会被一些 CSS 属性用到,加入计算之中,例如 vertical-align。会只有可替换元素才能具有这种自带值。

控制内容框中的对象位置

Certain CSS properties can be used to specify how the object contained within the replaced element should be positioned within the element's box area. These are defined by the CSS Images Module Level 3 and CSS Images Module Level 4 specifications:

object-fit
Specifies how the replaced element's content object should be fitted to the containing element's box.
object-position
Specifies the alignment of the replaced element's content object within the element's box.

参见

文档标签和贡献者

标签: 
此页面的贡献者: mdnwebdocs-bot, pujiaxun, RainSlide, kevinfszu, peanut_tao, yaway
最后编辑者: mdnwebdocs-bot,