视觉格式化模型之替换元素与非替换元素

一、替换元素

一个内容不受CSS视觉格式化模型控制，CSS渲染模型并不考虑对此内容的渲染，且元素本身一般拥有固有尺寸（宽度，高度，宽高比）的元素，被称之为替换元素。

比如，img元素的内容通常会被其src属性指定的图像替换掉。替换元素通常有其固有的尺寸：一个固有的宽度，一个固有的高度和一个固有的比率。比如一幅位图有固有用绝对单位指定的宽度和高度，从而也有固有的宽高比率。另一方面，其他文档也可能没有固有的尺寸，比如一个空白的html文档。

CSS渲染模型不考虑替换元素内容的渲染。这些替换元素的展现独立于CSS。object,video,textarea,input也是替换元素,audio和canvas在某些特定情形下为替换元素。使用CSS的content属性插入的对象是匿名替换元素。

二、非替换元素

w3c并没有给出明确的非置换元素的解释，但能确定的是除替换元素之外，所有的元素都是非替换元素。

由CSS的视觉格式化模型负责非替换元素的渲染。

三、替换元素和非替换元素的常见问题

1. 是否行内元素都不能设置宽度？

这是一个面试的时候经常遇到的一个坑。很多初学者的第一反应“行内元素不能设置宽高，其宽高都是尤其内容决定”。上面这句话，真是一个大坑，大家千万别当真。 行内元素，如果是行内替换元素，如 img, 它是可以设置宽高的。造成这种错觉的原因是，替换元素太少了。

2. 行内替换元素和行内非替换元素的高度计算

对于行内级非替换元素，高度设置是不适用的。

对于行内级置换元素来说，其高度的设置需遵循以下几点：

• 若宽高的计算值都为 auto 且元素有固有高度，则 height的使用值为该固有高度；
• 若高度的计算值为 auto 且元素有固有高度，则 height 的使用值为该固有高度；
• 若高度的计算值为 auto 且宽度有 非auto 的计算值，并且元素有固有宽高比，则 height 的使用值为：宽度使用值 / 固有宽高比；
• 若高度的计算值为 auto 且上述条件完全不符，则 height 的使用值 不能大于150px，且宽度不能大于长方形高度的2倍。

其它类型的置换元素，其高度的定义都参照行内置换元素的定义。