面试题：什么是替换元素？说说其概念及计算规则

在 CSS 中，替换元素（Replaced Element） 是指其内容的外观和尺寸不由 CSS 直接控制，而是由外部资源或浏览器默认行为决定的 HTML 元素。

简单来说，替换元素的“内容”是“被替换”的——它本身不包含可见内容，而是通过 src、href 等属性引用外部资源，浏览器根据这些资源来渲染该元素。

以下 HTML 元素是典型的替换元素：

⚠️ 注意：<canvas> 也是替换元素，尽管其内容可通过 JavaScript 绘制，但其初始渲染行为由浏览器控制。

内容由外部决定
替换元素的内容不是由其标签内的文本决定，而是由属性（如 src）指向的资源决定。
有自己的固有尺寸（Intrinsic Dimensions）
替换元素通常具有固有的宽度和高度，例如：
- 一张图片的原始分辨率（如 800×600px）。
- 视频的原始宽高比。
CSS 不能直接改变其“内容”
你不能用 color 改变图片的颜色，也不能用 font-size 改变视频的字体大小。

替换元素的尺寸计算遵循一套特殊的规则，优先级如下：

如果你通过 CSS 或 HTML 属性（如 <img width="200" height="100">）明确设置了 width 和 height，则使用这些值。
例如：img { width: 300px; height: 150px; }

如果只设置了 width，height 为 auto，则 height 会根据元素的固有宽高比（intrinsic aspect ratio）自动计算。
公式：height = width × (固有高度 / 固有宽度)
例如：一张 800×600 的图片（宽高比 4:3），设置 width: 400px; height: auto; → height = 400 × (600/800) = 300px。

特性	非替换元素（如 `<div>`, `<p>`）	替换元素（如 `<img>`, `<iframe>`）
内容控制	由 HTML 内容 + CSS 样式决定	由外部资源决定
固有尺寸	通常无（依赖布局）	通常有（如图片分辨率）
宽高计算	受 `box-sizing`、`margin`、`padding` 影响大	主要基于固有尺寸和宽高比
`height: auto` 行为	基于内容高度	基于固有宽高比

响应式图片css编辑img { max-width: 100%; height: auto; }
- 确保图片在小屏幕上不会溢出容器，同时保持原始宽高比。
避免布局偏移（Layout Shift）
- 如果图片未设置尺寸，加载前高度为 0，加载后突然出现，会导致页面“跳动”。
- 解决方案：提前设置 width 和 height，或使用 aspect-ratio 属性。
使用 aspect-ratio（现代方案）css编辑.video-container { aspect-ratio: 16 / 9; }
- 强制元素保持特定宽高比，即使内容尚未加载。

THE END