显式设置width和height属性可防止布局偏移，因浏览器能据此预估替换元素尺寸并预留空间，避免加载时重排；html属性是触发原生纵横比机制的唯一方式，css设置无法替代。
显式设置 width 和 height 属性（尤其是对 <img>、<iframe></iframe>、<video></video> 等替换元素）能直接防止布局偏移（Layout Shift），这是 Core Web Vitals 中 CLS 指标恶化的常见原因。
为什么 width 和 height 能稳定布局
浏览器在解析 HTML 时，若未声明 width 和 height，就无法预估替换元素的尺寸，只能先占位一个默认大小（如 0×0 或 300×150），等资源加载完成再重排——这个过程会推挤下方内容，造成“文字跳动”或按钮位移。
而一旦设置了这两个属性，浏览器就能在首次渲染前计算出元素的纵横比（aspect ratio），并预留准确空间。现代浏览器（Chrome 88+、Firefox 89+、Safari 15.4+）还会用 aspect-ratio: attr(width) / attr(height) 自动推导 CSS 纵横比，进一步避免重绘。
- 仅靠 CSS 的
width/height不够：它们可能被后续样式覆盖，且不参与 HTML 解析早期的尺寸推断 -
<img>上的 HTML 属性是唯一能触发浏览器原生纵横比保留机制的方式 - 对
<iframe></iframe>和<video></video>同样有效，但需注意：某些 CDN 或嵌入脚本会动态移除这些属性
width 和 height 在不同元素上的行为差异
不是所有元素都把这两个属性当“尺寸控制开关”来用；实际作用取决于元素类型和浏览器实现。
-
<img>：HTML 属性定义初始渲染尺寸，同时影响 CSSaspect-ratio推导（推荐始终设置） -
<canvas></canvas>：width和height是画布像素尺寸，非 CSS 显示尺寸；修改它们会清空画布内容 -
<video></video>：HTML 属性设播放器容器尺寸，不影响视频原始分辨率；若只设一个（如width="640"），浏览器按原始宽高比自动算高度 <table>：HTML 属性仍被支持，但语义弱、响应式差；应优先用 CSS <code>width+table-layout: fixed<div> 等普通元素：HTML 属性无效，必须用 CSS <code>width/height常见误用与修复建议
写了
width和height却没效果？大概率踩了这几个坑：- 给
<img>设置了width="100%"这类百分比值：HTML 属性不接受百分比（仅支持数字，单位默认为 px），会被忽略或转为 0 - 用 JS 动态插入图片时没同步写属性：
img.width = 640; img.height = 480;必须赋数值，不能写字符串"640" - CSS 强制覆盖：比如
img { width: 100%; height: auto; }会压倒 HTML 属性；可加!important或改用min-width/max-width控制缩放 - 响应式场景下硬编码像素值：可用
srcset+sizes配合 HTML 属性，例如<img style="max-width:90%" style="max-width:90%" src="a.jpg" srcset="a-400w.jpg 400w, a-800w.jpg 800w" sizes="(max-width: 600px) 400px, 800px">
最易被忽略的一点：即使你用了 CSS Grid 或 Flex 布局，只要里面塞了没设
width/height的<img>，CLS 仍可能超标——因为布局稳定性从 HTML 解析那一刻就开始了，不是 CSS 渲染完才决定的。- 给
