深入前端之replaced element-CSDN博客

本文链接：https://blog.csdn.net/yujunaiquanni/article/details/107510974

阅读注意事项

本篇文章的依赖主要是html specification 和 CSS specification。也就是说都是第一手资料，而不是转手资料。
本篇整体比较细节和理论，可能会看起来枯燥。但是我认为有时候阅读枯燥的文档式文章是有必要的。
写这篇的文章主要目的在于集群众之力量来修补自己之知识图谱。因此希望大家能够多多指出文章中不恰当之地方。
永久博文地址

introduction

在阅读CSS2 visual formatting model details时，里面出现了大量的关于replaced element和non-replaced element的概念。visual formatting model details中将element在inline-level and block-level和replaced and non-replaced两个不同的维度展开描述。因此，如果我们想要深入理解CSS的内部世界，那么理解replaced element的概念就是必不可少的了。

那么本篇笔记主要解决下面几个问题：

什么是replaced element?
什么是intrinsic dimensions?
实际开发中如何计算replaced element的尺寸?
对于前端来讲，HTML中具体有哪些elments可以被认为是replaced element?

什么是`replaced element`

w3c css2.2中对replaced element有一段简短的描述(来源于3.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).

从这段基本的描述中，我们可以总结出什么：

replaced element的content处于CSS formatting model控制之外。
常见的replaced element比如image, embedded document, applet
replaced element通常包含intrinsic dimensions: intrinsic width, intrinsic height, intrinsic ratio。但是并不是所有的replaced element都同时包含这三个属性值。
推论：replaced element之所以冠以replaced的形容词，是因为这类element的内容会被指向的外部资源给replace掉。

上述的描述中引入一个新的名词intrinsic dimensions. 那么，我们来看一看什么事intrinsic dimensions.

什么是`intrinsic dimensions`

从文字意义上来看，intrinsic dimensions表示的是内部尺寸。

另外，w3c CSS2.2中同样对intrinsic dimensions给出了一段简短的描述:

The width and height as defined by the element itself, not imposed by the surroundings. CSS does not define how the intrinsic dimensions are found. In CSS 2 only replaced elements can come with intrinsic dimensions. For raster images without reliable resolution information, a size of 1 px unit per image source pixel must be assumed.

从上面的定义中我们可以总结出几点：

CSS2中只有replaced element有intrinsic dimensions.
replaced element的width和height都由element自己定义.

但是，我们光从上面的定义中很难真正的理解intrinsic dimensions. 因此我们再来看CSS3，CSS Image Values and Replaced Content Module Level 3 5.1小节有更加精确的定义：

The term intrinsic dimensions refers to the set of the intrinsic height, intrinsic width, and intrinsic aspect ratio (the ratio between the width and height), each of which may or may not exist for a given object. These intrinsic dimensions represent a preferred or natural size of the object itself; that is, they are not a function of the context in which the object is used. CSS does not define how the intrinsic dimensions are found in general. Raster images are an example of an object with all three intrinsic dimensions. SVG images designed to scale might have only an intrinsic aspect ratio; SVG images can also be created with only an intrinsic width or height. CSS gradients, defined in this specification, are an example of an object with no intrinsic dimensions at all. Another example of this is embedded documents, such as the<iframe> element in HTML. An object cannot have only two intrinsic dimensions, as any two automatically define the third. If an object (such as an icon) has multiple sizes, then the largest size (by area) is taken as its intrinsic size. If it has multiple aspect ratios at that size, or has multiple aspect ratios and no size, then the aspect ratio closest to the aspect ratio of the default object size is used. Determine this by seeing which aspect ratio produces the largest area when fitting it within the default object size using a contain fit; if multiple sizes tie for the largest area, the wider size is chosen as its intrinsic size.

上面的definition主要包含4大块内容：

术语intrinsic dimensions通常指代intrinsic height， intrinsic width, intrinsic aspect ratio(width / height)三种值的集合。但是对于不同replaced element中的object来讲，这三种value不一定都会存在。
intrinsic dimensions表示的是引入object的自己的natural size,也就意味着这是和context无关的。通常来讲，CSS并不会定义如何获得intrinsic dimensions.

这里如果仔细的话，我们这里使用了element和object两个名词。使用两个不同的名词是有一定的目的的。首先我们在html specific replaced element中了解到html中的replaced element可以是<audio>,<img>,<canvas>,<embed>,<iframe>,<input>, <object>, <video>这几种。另外我们在什么是replaced element小节中推论到，replaced element之所以冠以replaced的形容词，是因为这类element的内容会被指向的外部资源给replace掉。所以这里就使用了element和object两个名词，object表示引入的外部资源本身，资源本身会有自己固定的的dimensions。 Note：但是，这并不意味着我们无法使用CSS来控制html element的外部展示，CSS控制replaced element的布局和intrinsic dimension两者并不冲突。具体细节可以看下面concrete object size的算法。

主要是几个例子。raster image这个object同时拥有3个intrinsic dimensions value。SVG iamges可能只拥有一个intrinsic aspect ratio或者intrinsic width或者intrinsic height.CSS gradient3种intrinsic dimension value都没有。
主要是一些边界情况，比如如果一个object有多个size。那么该选择哪一个？规范中是largest size将会作为该object的intrinsic size.如果有多个aspect ratio值，那么最接近ratio of the default object size的aspect ratio将会被选择。如果default object size使用contain fit的话，产生最大area的aspect ratio将会被选择。

但是，这些定义对于我们实际开发当中有什么用呢？换个角度来讲，就是我们在实际开发中，replaced element的布局与尺寸该如何来计算呢？

要给出上面的答案，我们可能还需要知道更多相关的名词：

specified size The specified size of an object is given by CSS, such as through the ‘width’ and ‘height’ or ‘background-size’ properties. The specified size can be a definite width and height, a set of constraints, or a combination thereof. concrete object size The concrete object size is the result of combining an object's intrinsic dimensions and specified size with the default object size of the context it's used in, producing a rectangle with a definite width and height. default object size The default object size is a rectangle with a definite height and width used to determine the concrete object size when both the intrinsic dimensions and specified size are missing dimensions.

有上面的定义可以知道：

specified size: specified size由CSS指定，比如通过width、height、background-size属性。specified size可以是有限的width和height, constraints集合或者两者的结合。
concrete object size: concrete object size由object's intrinsic dimensions, specified size和default object size这三者决定，产生一个有definite width and height的矩形。
default object size: default object size是一个有definite height and width的矩形。

理解了上面三种size的定义，我们开始来看看在规范的5.2 CSS Object Negotiation中Objects in CSS 的size是如何被决定并且渲染的：

When an image or object is specified in a document, such as through a ‘url()’ value in a ‘background-image’ property or an src attribute on an <img> element, CSS queries the object for its intrinsic dimensions.
Using the intrinsic dimensions, the specified size, and the default object size for the context the image or object is used in, CSS then computes a concrete object size. (See the following section.) This defines the size and position of the region the object will render in.
CSS asks the object to render itself at the concrete object size. CSS does not define how objects render when the concrete object size is different from the object's intrinsic dimensions. The object may adjust itself to match the concrete object size in some way, or even render itself larger or smaller than the concrete object size to satisfy sizing constraints of its own.
Unless otherwise specified by CSS, the object is then clipped to the concrete object size.

第一步，当image or object在document当中被指定（比如background-image通过url()或者<img> element通过src来指定），CSS会先去查找object的intrinsic size.
第二步，浏览器根据intrinsic dimensions, specified size, 和 default object size来计算出concrete object size(具体计算方法看下面).
第三步，CSS通知object根据concrete object size来渲染自己。CSS并没有规定当concrete object size和intinsic dimensions不一样的时候该如何渲染。object可能会自己调整自己来适应concrete object size或者为了满足自己的sizing constraints来大于或小于concrete object size。
第四步，除非CSS另有指定，不然object会被剪切为concrete object size大小。

下面我们展开来讲解一下第二步- 如何确定concrete object size。在规范5.3. Concrete Object Size Resolution中介绍了Default Sizing Algorithm:

如果specified size是有限的width和height，那么concrete object size的值就是specified size.
如果specified size只有width或height其中一个。那么concrete object size的相同属性的值为specified size提供。另外一个值由以下方式来计算：
1. 如果该object拥有intrinsic aspect ratio, 那么concrete object size将使用intrinsic aspect ratio来计算。
2. 否则的话，我们再看缺少的dimension是否在object的intrinsic dimensions中存在，如果存在，则取用该值。
3. 否则的话，concrete object size缺少的dimension则取用default object size.
如果specified size没有任何的constraints：
1. 如果object有intrinsic height或者intrinsic width，那么该concrete object size由intrinsic size来决定。
2. 否则的话，concrete object size则被当做是相对于default object size的contain constraint。

另外，我们需要了解两个常见的specified sizes：contain constraint和cover constraint.两者都是通过constraint rectangle和object's intrinsic aspect ratio来决定concrete object size的大小。

contain constraint: concrete object size将会被设置为一个根据object's intrinsic aspect ratio计算出来的最大的rectangle，并且该rectangle的width或height都各自比constraint rectangle的wdith和height小或相等。
cover constraint:concrete object size会被设置成一个根据object's intrinsic aspect ratio计算出来的最小的rectangle，并且该rectangle的width或height都各自比constraint rectangle的width和height大或相等。
在上面两种情况下，如果object没有intrinsic aspect ratio，那么concrete object size就是specified constraint rectangle.

HTML中有哪些元素可以被称为`replaced element`

从上面的内容，我可以知道replaced element的定义和计算细节。那么HTML中有哪些元素可以被称为replaced element呢？这个我们得从HTML standard 14.4 replaced element中来看。规范中主要将replaced element分为两大类：

Embedded content(嵌入内容):
- 首先，<embed>, <iframe>, <video> 这三种元素被看作是replaced elements.
- 对于<canvas>元素来讲，如果<canvas>中代表的是embedded content,那么该<canvas>元素也被当作replaced element(比如<canvas>中的content是bitmap)。否则的话，<canvas>会被看作是普通的rendering model中的元素。
- 对于<object>元素来讲，和<canvas>一样得分为两种情况。<object>中展示的是image, plugin, nested browsing context(比如iframe) 时被看做是replaced element.其他情况下被认为是普通元素。
- 对于<audio>来讲，通常browser会对这类元素有对应的user interface，如果<audio>的user interface被展示，那么<audio>就会被认为是replaced element.
Images: HTML当中中images主要分为2种：<img>和<input type="image"> user agent主要按照下面的规则来render上面两种元素：
- 如果该元素展示的image: 那么user agent将认为该元素是replaced element，并且根据CSS来render。
- 如果该element不展示image,但是该element包含intrinsic dimensions（比如来自dimension attributes 或CSS rules）- 该element被认为是replaced element:
  - user agent认为image在将来会是肯用的并且会在适当的时候被render
  - 或者 element没有alt attribute
  - 或者当前document处于quirks mode.
- 如果<img> element表示的是一些文本并且user agent不希望其发生改变：该元素被看做是non-replaced phrasing element
- 如果<img> element表示的是nonthing,并且user agent不希望其发生改变：该元素被看做是empty inline element
- 如果input element不展示image并且user agent不希望其发生改变：那么该element被看做是replaced element（元素包含一个button，button的内容是element的可替换内容）。

Note：1. 对于embed, iframe, img, object元素或者<input type="image">元素的align attribute等于center or middle时，该element的vertical-align将会被设定为value（element的vertical middle和parent element baseline 对齐）。