什么是置换元素

什么是置换元素

“置换元素”又叫做“替换元素”，（行内块元素） 它们所具有的特征为：在不使用css修饰时，元素的标签和属性也会影响元素的显示。

比如<img> 标签，浏览器会根据src属性读取图片并显示，且图片大小会影响<img>标签大小。 再比如，input标签的type属性会影响input的显示是输入还是选择。 最后，我们对置换元素有一个专业定义： 一个内容不受CSS视觉格式化模型控制，CSS渲染模型并不考虑对此内容的渲染，且元素本身一般拥有固有尺寸（宽度，高度，宽高比）的元素，被称之为置换元素。

常见的置换元素 img input textarea select object iframe canvas

置换元素 的特殊之处就是可以设置宽高

宽度

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

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

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

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

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

典型的例子：比如iframe, canvas

高度

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

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

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

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