置换和非置换元素

可替换元素和不可替换元素

当初听到置换元素和非置换元素时，我是一脸懵逼的，通过查阅资料，得知所谓的置换元素和非置换元素就是可替换元素和不可替换元素，下面是我查阅资料后对这一块知识的总结。

可替换元素（置换元素）

MDN对于可替换元素的定义如下(https://developer.mozilla.org/zh-CN/docs/Web/CSS/Replaced_element)

CSS 里，可替换元素（replaced element）的展现不是由CSS来控制的。这些元素是一类 外观渲染独立于CSS的 外部对象。 典型的可替换元素有 <img>、<object>、 <video> 和 表单元素，如<textarea>、 <input> 。 某些元素只在一些特殊情况下表现为可替换元素，例如 <audio> 和 <canvas> 。 通过 CSS content 属性来插入的对象 被称作 匿名可替换元素（anonymous replaced elements）。

通俗来讲，可替换元素就是不受CSS视觉格式化模型控制，CSS渲染模型并不考虑对此内容的渲染，且元素本身一般拥有固有尺寸（宽度，高度，宽高比）的元素。

不可替换元素（非置换元素）

MDN没有对于不可替换元素的定义，但是可以理解为不是可替换元素的就是不可替换元素。

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

对于行内级非置换元素，宽度的设置是不适用的（span/i）。这些元素本身的宽度由其内容本身的宽度决定。

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

1. 若宽高的计算值都为auto, 且元素有固有宽度，则width的使用值为该固有宽度

2. 若宽度的计算值为auto, 且元素有固有宽度，则width的使用值为该固有宽度

3. 如宽度的计算值为auto , 且高度有非auto的计算值，并且元素有固有的宽高比，则width的使用值为 高度使用值 * 固有宽高比

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

4. 除此之外，当width的计算值为auto时，则宽度的使用值为300px

   典型的列子：比如iframe,canvas

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

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

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

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

1. 若宽高的计算值为auto, 且元素有固有高度，则height的使用值为该固有高度
2. 若高度的计算值为auto,且元素有固有高度，则height的使用值为该固有高度
3. 若高度的计算值为auto,且宽度有非auto的计算值，并且元素有固有宽高比，则height的使用值为：宽度使用值/固有宽高比
4. 若高度的计算值为auto,且上述条件完全不符，则height的使用值不能大于150px,且宽度不能大于长方形高度的2倍

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

上面的这段描述中，我们看到了行内级元素这个概念，后面我会写写文字讲讲这个东西。

本文参考自如下文章 置换和非置换元素