HTML中的置换元素与非置换元素

什么是置换元素？

一个

内容

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

什么是非置换元素？

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

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

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

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

若宽高的计算值都为

auto

且元素有固有宽度，则

width

的使用值为该固有宽度；

典型的例子是：拥有默认宽高的

input

当宽度的计算值为auto时，则宽度使用值为其默认的固有宽度

若宽度的计算值为

auto

且元素有固有宽度，则

width

的使用值为该固有宽度；

例子同上

若宽度的计算值为

auto

且高度有

非auto

的计算值，并且元素有固有宽高比，则

width

的使用值为

高度使用值
* 固有宽高比

；

典型的例子：

img

当只定义了其高度值时，其宽度将会根据固有宽高比进行等比设置

除此之外，当

width

的计算值为

auto

时，则宽度的使用值为

300px

典型的例子：比如iframe, canvas

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

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

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

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

若宽高的计算值都为

auto

且元素有固有高度，则

height

的使用值为该固有高度；
若高度的计算值为

auto

且元素有固有高度，则

height

的使用值为该固有高度；
若高度的计算值为

auto

且宽度有

非auto

的计算值，并且元素有固有宽高比，则

height

的使用值为：

宽度使用值
/ 固有宽高比

；
若高度的计算值为

auto

且上述条件完全不符，则

height

的使用值

不能大于150px

，且宽度不能大于长方形高度的2倍。

其它类型的置换元素，其高度的定义都参照行内置换元素的定义。

文章转自：

http://blog.doyoe.com/2015/03/15/css/%E7%BD%AE%E6%8D%A2%E5%92%8C%E9%9D%9E%E7%BD%AE%E6%8D%A2%E5%85%83%E7%B4%A0/