HTML中的置换元素(替换元素)和非置换元素(不可替换元素)

什么是置换元素

“置换元素”又叫做“替换元素”，

它们所具有的特征为：在不使用css修饰时，元素的标签和属性也会影响元素的显示。

比如

<img>

标签，浏览器会根据src属性读取图片并显示，且图片大小会影响

<img>

标签大小。

再比如，input标签的type属性会影响input的显示是输入还是选择。

最后，我们对置换元素有一个专业定义：

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

常见的置换元素

img
input
textarea
select
object
iframe
canvas

那么，除此之外的其他HTML元素就是非置换元素。

置换元素的特点

置换元素做为特殊的内联元素，特殊之处就在于可以设置

宽度

和

高度

，接下来我们就对宽度和高度特点进行总结。（提起精神，因为可能比较难理解……）

宽度

若宽度的值为 auto 且元素有固有宽度，则 width 的使用值为该固有宽度。

典型的例子是：拥有默认宽高的 input 当宽度的计算值为auto时，则宽度使用值为其默认的固有宽度

若宽度的值为 auto 且高度有 非auto 的计算值，并且元素有固有宽高比，则 width 的使用值为 高度使用值 * 固有宽高比。

典型的例子：img 当只定义了其高度值时，其宽度将会根据固有宽高比进行等比设置

当 width 的值为 auto 时，则宽度的使用值为 300px。

典型的例子：比如iframe, canvas

高度

若高度的值为 auto 且元素有固有高度，则 height 的使用值为该固有高度；

典型的例子：img标签内图片有固有高度

若高度的值为 auto 且宽度有 非auto 的值，并且元素有固有宽高比，则 height 的使用值为：宽度使用值 / 固有宽高比；

若高度的值为 auto 且上述条件完全不符，则 height 的使用值 不能大于150px，且宽度不能大于长方形高度的2倍。

(后两个没有找到例子，如果大家有例子可以补充上来，谢谢。)