请解释CSS中替换元素的概念，并说明其尺寸计算规则。

回答思路

1. 【回答框架 1】替换元素是指内容由外部资源替换的元素，如img、video、iframe、input等，其内容不由CSS直接控制。非替换元素如div、span等，其内容由CSS生成或来自标签内部。
2. 【回答框架 2】替换元素的尺寸计算规则：优先级从高到低是CSS显式设置的宽度和高度、HTML属性（如img的width和height属性）、固有尺寸（如图片的原始像素宽度和高度）、默认尺寸（如未设置时替换元素通常为300x150或其他默认值）。
3. 【回答框架 3】当只设置宽度或高度之一时，另一个维度按固有比例缩放，以保持宽高比。若设置了宽高但未保持比例，可能导致拉伸变形。对于没有固有比例的元素（如iframe），宽高独立设置，不保持比例。
4. 【回答框架 4】当替换元素是块级时，其水平方向的表现与普通块级元素不同，例如img默认是inline级，但可以通过display改变。其是否在行内格式化上下文中影响基线对齐等。
5. 【关键点 1】替换元素包括img、video、iframe等，内容由外部资源替换。
6. 【关键点 2】CSS尺寸优先级：CSS样式 > HTML属性 > 固有尺寸 > 默认尺寸。
7. 【关键点 3】设置单一维度时，另一维度按固有比例自动调整。
8. 【关键点 4】无固有比例的元素（如iframe）宽高独立设置，不保持比例。
9. 【易错点 1】混淆替换元素与块级元素的行为，例如认为img默认是块级。
10. 【易错点 2】忽略固有比例在设置单边尺寸时的自动调整。
11. 【易错点 3】误以为所有替换元素都有固有尺寸，如iframe无固有尺寸。