替换元素(replaced element)与非替换元素(non-replaced element)

来源:互联网 发布:时间轴页面源码 编辑:程序博客网 时间:2024/06/06 16:55


以下是摘自W3C官网的解释,请参考原文:http://www.w3.org/TR/CSS21/conform.html

Replaced element

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.


个人理解:

所谓替换元素(replaced element),就是元素本身没有实际内容,最终显示内容需要浏览器根据元素某些属性去判断的元素。

如<img>元素,其最终的显示内容是由属性src决定的,如<input>元素,其最终显示的效果是由属性type决定的。

常见的替换元素还包括:<textarea>、<select>、<object>。


替换元素经常具备固有的尺寸:固有的width,固有的height,以及固有的比例ratio。

这个理解起来不难,类比<img>元素,它的固有尺寸就是原始图片大小;类比<input>元素,不管其type属于哪一种类型,显示出来的input元素都有原始尺寸。

但是像<div></div>这样的非替换元素,其没有固有尺寸。


HTML中大多数是非替换元素(non-replaced element)。

所谓非替换元素和替换元素相反,元素本身是有实际内容的,浏览器会直接将其内容显示出来,而不需要根据元素属性来判断到底显示什么内容。如<span>this is the content</span>,元素内容就是“this is the content”。




0 0
原创粉丝点击