替换元素的概念及计算规则

概念

元素除了通过 display 来指定 block、inline、inline-block 这一些属性之外，还有一种内在的特性——替换还是非替换。

• 替换元素

  像 img、video、canvas、object、input 等文档中指定的内容只是占位，真正的内容是在后面替换上去的。

  像 img 内容是图片加载完成之后替换上去的。

• 非替换元素

  像 div、p、span 这一些内容一开始就写在文档中。

尺寸的计算规则

替换元素的尺寸从内而外分为三类：

• 固有尺寸

  指的是替换内容原本的尺寸。例如，图片、视频作为一个独立文件存在的时候，都是有着自己的宽度和高度的。

• HTML 尺寸

  只能通过 HTML 原生属性改变，这些 HTML 原生属性包括的 width 和 height 属性、的 size 属性。

• CSS 尺寸

  特指可以通过 CSS 的 width 和 height 或者 max-width/min-width 和 max-height/min-height 设置的尺寸，对应盒尺寸中的 content box。

这三层结构的计算规则具体如下：

1. 如果没有 CSS 尺寸和 HTML 尺寸，则使用固有尺寸作为最终的宽高。
2. 如果没有 CSS 尺寸，则使用 HTML 尺寸作为最终的宽高。
3. 如果有 CSS 尺寸，则最终尺寸由 CSS 属性决定。
4. 如果固有尺寸含有固有的宽高比例，同时仅设置了宽度或仅设置了高度，则元素依然按照固有的宽高比例显示。
5. 如果上面的条件都不符合，则最终宽度表现为 300 像素，高度为 150 像素。
6. 内联替换元素和块级替换元素使用上面同一套尺寸计算规则。