css-置换元素与非置换元素

html中我们知道什么是行内元素，什么是块元素，什么是行内块元素。

置换元素，与非置换元素其实是很少去使用的名词。

css权威指南上写：

置换元素：为其他内容占位的元素。典型的置换元素是img，它指向一个图像文件，那个图像及插在img元素在文档流中的位置。大多数表单元素也是置换元素。

非置换元素：内容包含在文档中的元素。例如，段落（p）是非置换元素，因为段落中的文本内容在元素自身中。

但看这个有些晦涩，在w3c中对于上面两者的说明更让人能理解：

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

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

哪些是置换元素：
HTML中的img、input、textarea、select、object都是替换元素。这些元素往往没有实际的内容，即是一个空元素。

众所周知，img是行内块元素，接下来会把行内元素（包含行内块，以及行内元素）和块元素

行内元素其实是不能设置宽高的（span）但是img行内块元素，它是可以设置宽高的。
那么上问我们提到了img是置换元素，它本身就有固定的尺寸。

那么结合着行内元素以及是否是置换元素，我们可以总结一下几点：
对于宽度的设置：

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

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

若宽高的计算值都为 auto 且元素有固有宽度，则 width 的使用值为该固有宽度；
典型的例子是：拥有默认宽高的 input 当宽度的计算值为auto时，则宽度使用值为其默认的固有宽度

若宽度的计算值为 auto 且高度有 非auto 的计算值，并且元素有固有宽高比，则 width 的使用值为 高度使用值 * 固有宽高比；
典型的例子：img 当只定义了其高度值时，其宽度将会根据固有宽高比进行等比设置

同理高度也是如此