前端 CSS 面试题, 什么是替换元素?说说其概念及计算规则

Step 1

Q:: 什么是替换元素？

A:: 替换元素（Replaced Elements）是指那些在浏览器中表现为外部对象的元素。它们的内容不是由文档的HTML标签来定义，而是由外部资源来替换。典型的替换元素包括：<img>、<input>、<video>、<iframe>等。由于这些元素的内容和显示是由浏览器处理的，因此它们在渲染时与普通的HTML元素有所不同。替换元素的显示尺寸通常由其自身的内容或者指定的CSS宽度和高度属性决定。

Step 2

Q:: 替换元素的计算规则是什么？

A:: 替换元素的尺寸由其外部内容或资源的固有尺寸（intrinsic dimensions）决定，如果没有明确的CSS宽度和高度属性，浏览器会使用固有尺寸来确定元素的显示大小。例如，<img>标签如果没有设置width和height，浏览器会根据图像的固有宽度和高度来展示图像。而对于像<input>这样的表单元素，浏览器会根据系统或浏览器默认样式来确定其显示尺寸。

Step 3

Q:: 哪些元素是替换元素？

A:: 常见的替换元素包括<img>、<object>、<video>、<audio>、<iframe>、<embed>、<input>、<canvas>。这些元素的内容不是通过HTML直接定义的，而是由外部资源或浏览器控制的内容所替代。

Step 4

Q:: 替换元素和非替换元素的区别是什么？

A:: 替换元素的内容由外部资源或浏览器自动决定，而非替换元素的内容是通过文档的HTML直接定义的。非替换元素的内容会直接受到CSS的影响，而替换元素由于其内容是由外部资源控制，CSS对其内容的影响相对有限。