置换和非置换元素

什么是置换元素？##

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

什么是非置换元素？##

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

行内级置换和非置换元素的宽度定义##

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

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

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

2. 若宽度的计算值为 auto 且元素有固有宽度，则 width 的使用值为该固有宽度；
   例子同上

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

4. 除此之外，当 width 的计算值为 auto 时，则宽度的使用值为 300px
   典型的例子：比如iframe, canvas

5. 其它类型的置换元素，其宽度的定义都参照行内置换元素的定义

行内级置换和非置换元素的高度定义

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

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

1. 若宽高的计算值都为 auto 且元素有固有高度，则 height 的使用值为该固有高度；
2. 若高度的计算值为 auto 且元素有固有高度，则 height 的使用值为该固有高度；
3. 若高度的计算值为 auto 且宽度有 非auto 的计算值，并且元素有固有宽高比，则 height 的使用值为：宽度使用值 / 固有宽高比；
4. 若高度的计算值为 auto 且上述条件完全不符，则 height 的使用值 不能大于150px，且宽度不能大于长方形高度的2倍。
5. 其它类型的置换元素，其高度的定义都参照行内置换元素的定义。

转载自：http://blog.doyoe.com/2015/03/15/css/置换和非置换元素/?utm_source=caibaojian.com