由“CSS视觉格式化模型”到“置换元素”

在笔试题中看到置换元素相关的题目，以前没听说过，就抱着学习的心态查了一番，发现网上内容五花八门，并不适合小白，所以在自认为搞懂的基础上，自己也来写一写。
有人可能会问，不是说说置换元素吗？怎么先说起来CSS视觉格式化模型了。因为置换元素的定义是 不受CSS视觉格式化模型控制，CSS渲染模型并不考虑对此内容的渲染，且元素本身一般拥有固有尺寸（宽度，高度，宽高比）的元素，被称之为置换元素。 所以说，先聊聊CSS视觉格式化模型，有助于我们对于置换元素的理解。

CSS视觉格式化模型

在视觉格式化模型中，文档树中的每个元素都将会根据盒模型产生零到多个盒子。这些盒子的布局由如下因素决定：

1. 盒子的尺寸和类型；
2. 定位策略（正常文档流，浮动或者绝对定位）；
3. 和文档树中其他元素的关系；
4. 额外的信息（比如视口的大小，图片的原始尺寸等）；

此处内容为参考了一篇文章，该部分详细内容请参考css视觉格式化模型。文章说的很详细，但是像我这种，看到长篇大论就比较头疼。所以用一句话来概括下就是文档元素显示到页面的显示规则。比如说你定义的盒模型的尺寸、你布局时采用的定位策略等等。

置换元素

置换元素定义上边已经说过，不在重复。要弄懂置换元素，首先要明白行内元素和块元素。如要详细了解，请自行网上学习。此处我们只需要明白一个点就可以：块元素可以设置宽高，行内元素不能设置宽高。此时，你可能会有疑问，img标签是行内元素，为什么可以设置宽高呢？ 此处正是本文的重点，因为img是置换元素。说到这里，大家可能有点眉目了，一句话概括：置换元素做为特殊的内联元素，特殊之处就在于可以设置宽度和高度。接下来我们就对宽度和高度特点进行总结。

1. 若宽度的值为auto且元素有固有宽度，则width的使用值为该固有宽度。(拥有默认宽高的input当宽度的计算值为auto时，则宽度使用值为其默认的固有宽度。)
2. 若宽度的值为auto且高度有非auto的计算值，并且元素有固有宽高比，则 width的使用值为高度使用值 * 固有宽高比。(img当只定义了其高度值时，其宽度将会根据固有宽高比进行等比设置。)
3. 当width的值为auto时，则宽度的使用值为 300px。(比如iframe, canvas。)

高度特点类似。
最后提一句，官方文档并没有给出非置换元素的定义，故，不是置换元素的都是非置换元素。