替换元素(Replaced Element)

替换元素的定义

W3C 的文档《Conformance: Requirements and Recommendations》是这么定义的:

An element whose content is outside the scope of the CSS formatting model, such as an image, embedded document, or applet. For example, the content of the HTML IMG element is often replaced by the image that its “src” attribute designates. Replaced elements often have intrinsic dimensions: an intrinsic width, an intrinsic height, and an intrinsic ratio. For example, a bitmap image has an intrinsic width and an intrinsic height specified in absolute units (from which the intrinsic ratio can obviously be determined). On the other hand, other documents may not have any intrinsic dimensions (for example, a blank HTML document).

User agents may consider a replaced element to not have any intrinsic dimensions if it is believed that those dimensions could leak sensitive information to a third party. For example, if an HTML document changed intrinsic size depending on the user”s bank balance, then the UA might want to act as if that resource had no intrinsic dimensions.

The content of replaced elements is not considered in the CSS rendering model.

大概的意思应该是替换元素是元素的内容部分并非由文档内容直接显示的元素。替换元素本身没有实际内容,最终显示内容需要浏览器根据元素某些属性去判断的元素。

典型的替换元素

在 CSS 中绝大多数的元素都是非替换的元素,只有少数几个元素是替换元素。以下列出的就是典型的替换元素:

  • <iframe>
  • <video>
  • <embed>
  • <img>

而以下这些元素在特定情况下也会被当作替换元素处理:

  • <audio>
  • <canvas>
  • <objecrt>
  • <applet>

除此之外,表单控件中的 input 控件可以被替换,其最终显示的效果是由属性 type 决定的。而当它的 type 属性设置为 image 值时,它就就一定是一个替换元素。

除了上面介绍的这些常见的替换元素之外,还有一种“匿名(anonymous)”的替换元素。就是我们实用 CSS 的 content 插入的内容。因为这个元素并不实际存在与 HTML 文档之中,所以称它是“匿名”替换元素。

替换元素的特点

在认识了替换元素后,现在我们再来具体讲讲替换元素的特点:

  • 用来替换元素内容的部分并非由文档内容直接表示;
  • 替换元素通常具有固有尺寸:固有宽度、固有高度和固有比(如果 width 属性设置为 auto,元素的宽度是内容的固有宽度);
  • 替换元素的 width 属性值不等于其固有宽度,那么它的 height 属性值也会等比例变化,除非 height 属性值也显示设置了值,反过来 width 属性值也会随 height 属性值变化而等比例变化;
  • 替换元素显示时也生成盒模型;

要理解上面总结的特点,我们就使用 img 元素(图片实际大小:200 × 200)来讲解吧,例如下面的代码:

<img src="css.jpg" alt="替换元素" />

替换元素
效果图(一)

上面的代码实际上时不包含任何具体内容的,只有 img 元素名称和 src 属性。如果不指定具体要显示的图片路径,这个标签没有任何实际意义。也就是所谓的“内容的部分并非由文档内容直接表示”,实际的内容图片会替换掉这个标签。

另外,上面这段示例代码,我没有制定 width 属性值,那么 width 属性默认的值就是 auto。而 img 元素的内容宽度就是图片实际的宽度了,也就是所谓的“元素的宽度是内容的固有宽度”(注意,替换元素又区别于非替换元素中的块级元素默认宽度会独占一行)。

现在我显示的设置 width 属性值为 300:

<img src="http://www.yaohaixiao.com/wp-content/uploads/2017/11/CSS-200x200.png" alt="替换元素" width="300" height="300">

替换元素
效果图(二)

很明显,图片的高度也等比放大到了 300 个像素高了。这也就是“如果替换元素的 width 属性值不等于其固有宽度,那么它的 height 属性值也会等比例变化”。

当然,显而易见的是 img 元素也生成了盒模型

‘, ‘替换元素(Replaced Element)’, ‘在CSS中,元素通常有两种形式:替换元素和非替换元素。绝大多数的元素都是非替换的元素,只有少数几个元素是非替换元素。替换元素(Replaced Elements)是指用来替换元素内容的部分并非由文档内容直接表示的元素的元素。替换元素如果 width 属性设置为 auto,元素的宽度是内容的固有宽度。如果替换元素的 width 属性值不等于其固有宽度,那么它的 height 属性值也会等比例变化,除非 height 属性值也显示设置了值,反过来 width 属性值也会随 height 属性值变化而等比例变化。替换元素显示时也生成盒模型。

SHARE THIS PAGE

免责声明:本站文章中的观点都是作者个人观点,并没有以任何方式反映他所属机构的意见。

发表评论