一、什么是替换元素？替换元素是CSS世界中的一个重要概念，与内联元素和块级元素并列。区别在于替换元素的内容可以被替换，即内容由外部资源（如图像、视频、表单控件等）提供，而非由HTML内部的文本或子元素决定。典型的替换元素包括：
<img>
<object>
<video>
<iframe>
表单元素如 <textarea> 和 <input>
二、替换元素的特性
内容可替换性：
替换元素的内容通常由属性（如src）定义，可以通过修改这些属性来替换显示的内容。
外观不受大部分CSS影响：
替换元素的内容在很大程度上不受外部CSS样式的影响。要改变其外观，通常需要使用特定的CSS属性，如appearance或浏览器特定的样式接口。
具有固有尺寸：
替换元素通常具有自身的固有尺寸（默认宽高），如<img>默认没有设置尺寸时，浏览器会根据图片的实际尺寸或默认值进行渲染。
特殊的尺寸计算规则：
替换元素的尺寸计算遵循特定规则，考虑固有尺寸、HTML属性尺寸（如width、height）、以及CSS设置的尺寸。
默认的display属性值各异：
不同的替换元素有不同的默认display值。例如，<img>默认是inline，而<input>则是inline-block。
三、替换元素的默认 display 值不同替换元素在不同浏览器中的默认display值可能有所差异，以下是常见替换元素在主流浏览器中的默认display属性：
元素 Chrome Firefox IE
<img> inline inline inline
<iframe> inline inline inline
<video> inline inline inline
<select> inline-block inline-block inline-block
<input> inline-block inline inline-block
<button> inline-block inline-block inline-block
<textarea> inline-block inline inline-block
注意：部分元素在Firefox中表现不同，例如<textarea>和大多数<input>类型在Firefox中是inline。四、替换元素的尺寸计算规则替换元素的尺寸计算可分为三层：
固有尺寸：
元素自身的默认尺寸。例如，图片的实际像素尺寸。
HTML尺寸：
通过HTML属性设置的尺寸，如<img width="200" height="100">。
CSS尺寸：
通过CSS的width和height或max-width/min-width等属性设置的尺寸。
计算规则：
无CSS与HTML尺寸：使用固有尺寸。
有HTML尺寸，无CSS尺寸：使用HTML属性设置的尺寸。
有CSS尺寸：CSS属性优先，覆盖固有尺寸和HTML尺寸。
仅设置宽度或高度且保持固有宽高比：根据固有比例自动计算另一维度。
无匹配条件：默认使用如<video>的300px × 150px。
五、开发中的注意事项
跨浏览器兼容性：
不同浏览器对替换元素的默认display值和尺寸计算可能存在差异。建议在CSS重置时显式设置替换元素的display属性，如：
img { display: inline-block;}
这样可以统一不同浏览器中的表现，尤其是解决Firefox中<img>默认display为inline导致无法设置宽高的问题。
避免替换元素内容缺失导致的布局问题：
当替换元素的内容（如<img>的src）缺失时，不同浏览器可能表现异常。可以通过CSS技术避免这种情况，例如使用透明占位图或通过属性控制显示。
使用object-fit属性：
对于需要控制替换元素内容适应方式的场景（如图片填充、保持比例），可使用object-fit属性。例如：
img { object-fit: contain;}
伪元素与替换元素的结合使用：
使用::before和::after伪元素为替换元素添加装饰性内容时，要注意替换元素自身的特性可能影响伪元素的表现。例如，::before在某些替换元素上可能不起作用。
可访问性与SEO考虑：
使用content属性生成的重要内容可能无法被屏幕阅读设备读取或被搜索引擎抓取。因此，重要信息应通过HTML直接提供，而非依赖CSS生成。
动态内容替换技巧：
可以利用content属性动态替换替换元素的内容，实现如图片悬停更换等效果。但需注意content属性的局限性，如无法通过JavaScript直接获取生成的内容。
固有尺寸的不可变性：
替换元素的固有尺寸通常不可通过CSS直接改变，改变的只是显示方式（如填充、覆盖等）。在设计时要预留足够的空间，避免内容被裁剪或显示不全。