首先介绍什么是可替换元素：通过修改某个属性值，呈现的内容就可以被替换的元素就称为可替换元素，比如img、object、video、iframe、textarea、input
可替换元素的特点：
* 内容的外观不受页面上的CSS的影响
* 有自己的尺寸
* 在很多CSS属性上有自己的一套表现规则
* 替换元素的默认display值都是inline或者inline-block，这就代表着input等输入框可以和span在同一行出现
替换元素的尺寸从内往外分为3类：
* 固有尺寸指的是替换元素内容原本的尺寸
* HTML尺寸略抽象，只能通过HTML原生属性改变
* CSS尺寸特指可以通过CSS的width、height等设置的尺寸，对应content-box
CSS世界中的替换元素的固有尺寸有一个很重要的特性，那就是我们是无法改变这个替换元素内容的固有尺寸的。比如图片资源的固有尺寸是无法改变的，我们设置图片宽高时，其实是content替换内容默认的适配方式是fill，尺寸变化的本质并不是改变固有尺寸，而是采用了填充作为适配HTML尺寸和CSS尺寸的方式，而在CSS3之前，这个fill是无法改变的，直到CSS3出现了object-fit
替换元素和非替换元素的距离，就是content属性，content属性生成的内容都是替换元素