可替换元素是浏览器不完全依赖html内容、而由外部资源或内置ui控件决定其尺寸与外观的元素。如渲染图片、启用播放器、绘制复选框，其行为绕过标准css盒模型。
什么是可替换元素（replaced element）
浏览器在渲染时，不完全依赖 HTML 文本内容来决定外观的元素，就是可替换元素。它的尺寸、外观、行为由外部资源或内置规则决定，<img> 渲染一张图片，<video></video> 启动视频播放器控件，<input type="checkbox"> 画一个复选框——这些都不是靠 CSS 盒模型“撑”出来的，而是浏览器用原生 UI 或资源加载后“替换”进来的。
常见可替换元素列表及关键特征
以下元素在所有主流浏览器中默认为可替换元素，且具有典型表现：
-
<img>：即使没有src，也占据流式空间；width/height属性直接生效，不受display: inline影响其盒模型行为 -
<iframe></iframe>：有独立渲染上下文，width/height是初始尺寸，但可被 CSS 覆盖；注意loading="lazy"对其懒加载支持较晚（Chrome 77+） -
<video></video>和<audio></audio>：自带控件是 UA 样式，controls属性开关控件显示；无src时仍会渲染空白控件区 -
<canvas></canvas>：即使为空，也是可替换元素；width/height是绘图表面分辨率，CSS 宽高仅缩放显示，不影响绘制精度 -
<object></object>和<embed></embed>：行为取决于type或插件，现代浏览器对 Flash 等已禁用，但 PDF 嵌入（type="application/pdf"）仍常见 -
<input>（除type="hidden"外）：type="text"、"number"、"date"、"checkbox"等均是可替换；type="button"和"submit"在部分浏览器中行为略有差异（如是否响应:focus-visible） -
<select></select>和<textarea></textarea>：虽内容可编辑，但整体渲染由 UA 控件实现，line-height对<select></select>通常无效，<textarea></textarea>的换行由用户输入触发而非white-space
为什么 <svg></svg> 和 <math></math> 不算（默认）可替换元素
这是容易混淆的点：<svg></svg> 是内联 SVG 容器，其子元素（如 <circle></circle>）由 CSS 盒模型 + SVG 渲染引擎共同处理，它本身不是“被替换”的——它就是渲染主体。同理，<math></math> 是 MathML 根元素，需依赖浏览器 MathML 支持，且其布局遵循内联公式规则，不是靠外部资源或 UA 控件“填入”的。
不过有个例外：<img src="chart.svg"> 中的 chart.svg 是作为外部资源被替换进来的，此时 <img> 是可替换元素，而 SVG 内容只是它的载荷。
可替换元素对 CSS 的影响与调试技巧
它们绕过部分 CSS 继承和盒模型约束，导致样式行为反直觉：
-
vertical-align对<img>、<input>有效，但对<div> 无效（除非设为 <code>inline-block） -
font-size不影响<input type="checkbox">的勾选框大小，但会影响旁边文字；需用transform: scale()或自定义伪元素方案 -
content伪元素对大多数可替换元素无效（<img>、<input>、<video></video>均不支持::before/::after） - 调试时可用
getComputedStyle(el).display查看计算值，但更可靠的是检查el.toString()是否含[object HTMLImageElement]等，或直接查规范定义
真正难处理的，是那些“半可替换”场景：比如 <input type="file"> 的按钮样式完全不可控，只能用 label + opacity: 0 遮罩；又比如 <video></video> 的全屏按钮在 iOS 上无法隐藏。这些不是概念问题，而是平台限制，得靠降级或 polyfill 应对。
