替换元素渲染特性

Tue, 04 Mar 2025 06:58:34 +0000

考察点分析

本题主要考核以下核心能力：

具体评估点：

替换元素渲染流程 > 固有尺寸计算规则 > 多属性控制冲突

替换元素差异：
- <img>属于替换元素，其内容由外部资源决定，具有固有尺寸。当未设置CSS尺寸时，浏览器自动采用资源原始尺寸
- <div>作为非替换元素，其尺寸完全由CSS控制，默认宽度100%/高度auto，无固有尺寸概念

固有尺寸计算：

 if (CSS尺寸存在) {
 采用CSS设定值
} else if (HTML属性尺寸存在) { // 如<img>的width/height属性
 转换为像素值应用
} else {
 使用资源固有尺寸
}

对于响应式图片，通过srcset配合sizes属性实现视窗自适应尺寸选择

textarea特殊控制：
- rows/cols基于字符计量控制初始尺寸，对应clientWidth/clientHeight
- CSS的width/height直接控制物理尺寸，对应offsetWidth/offsetHeight
- 当二者冲突时，现代浏览器采用CSS优先策略，但字符计量属性仍影响：
  - 滚动条出现阈值
  - 移动端输入体验
  - 表单验证提示位置

<img>作为替换元素具有由外部资源决定的固有尺寸，当未设置CSS尺寸时自动采用图片原始尺寸。<div>作为普通块容器，其尺寸完全由CSS控制，默认宽度撑满容器，无固有尺寸概念。

固有尺寸计算遵循CSS尺寸 > HTML属性尺寸 > 资源固有尺寸的优先级链。例如未设置CSS的<img>将优先采用HTML的width属性值，若均未设置则使用图片文件的实际像素尺寸。