width属性占真实空间，但仅对img、table等特定元素生效，用于加载前预留布局空间；对div等非替换元素无效，且CSS width始终覆盖HTML width属性。
width属性到底占不占真实空间？
占。但只对部分元素生效，且行为因渲染模式而异。HTML 的 width 属性（如 <img width="300"> 或 <table width="80%">）本质是给浏览器一个“提前占位”的提示，不是 CSS 布局计算中的最终宽度。
它生效的前提是：该元素是替换元素（如 <img>、<iframe>、<hr>），或被浏览器旧式解析器识别为可接受内联尺寸的元素（如 <table>、<object>）。对 <div>、<p> 这类非替换块级元素，HTML width 属性完全被忽略——你写 <div width="200">，浏览器压根不认。
- 浏览器在解析 HTML 时，若看到
<img width="400" height="300">，会立即在布局树中预留 400×300 的空白区域，哪怕图片还没加载 - 这个占位能防止图片加载后“突然撑开”页面，造成内容抖动（layout shift）
- 但若只写
width不写height，现代浏览器（Chrome 99+）可能无法准确推算宽高比，仍会触发轻微重排
为什么写了width还是抖？常见失效场景
写了 width 和 height 却仍有抖动，大概率掉进了这几个坑：
-
<img>标签用了width/height，但父容器设置了max-width: 100%或display: flex，CSS 强制覆盖了 HTML 属性值 - 图片是响应式加载（
srcset+sizes），浏览器根据视口选了不同分辨率图源，但 HTML 的width/height没按实际渲染尺寸设（比如原图 800×600，但用width="400"，宽高比就错了） -
<img>加了loading="lazy"，且图片在视口外，部分浏览器（Safari 15.4 之前）会延迟解析width/height，导致占位失败 - 用了 SVG 或 base64 内联图，但没显式声明
viewBox，浏览器无法从 HTMLwidth/height推出正确缩放比例
CSS width vs HTML width：谁赢？
CSS 赢。只要存在任何一条生效的 CSS 规则设置了 width（包括 style 属性、class、id 选择器），它就会覆盖 HTML 的 width 属性。这不是优先级问题，而是渲染流程决定的：HTML 属性仅用于初始占位，CSS 才参与最终布局计算。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
立即学习“前端免费学习笔记（深入）”；
-
<img src="a.jpg" width="200" style="width: 150px;">→ 渲染宽度是 150px -
<table width="500"><tr><td>x</td></tr></table>+table { width: 300px; }→ 表格最终宽 300px - 例外：某些老式邮件客户端（如 Outlook Desktop）只认 HTML
width，完全忽略 CSS —— 这是兼容性妥协点，不是标准行为
防抖动的最佳实践：别只靠width
单靠 HTML width 和 height 已不够。真正稳的方案是组合使用：
- 始终同时设置
width和height（像素值），确保宽高比固定 - 给
<img>加style="aspect-ratio: width / height; width: 100%; height: auto;"，让 CSS 主导但保留比例 - 对响应式图，用
srcset时，把width/height设为最大可能尺寸（如原图尺寸），再配合sizes精确控制 - 关键首屏图禁用
loading="lazy"，避免懒加载干扰占位逻辑
最易被忽略的一点：服务端渲染或静态生成时，如果图片尺寸是运行时才确定的（比如 CMS 返回的 URL 不带尺寸信息），HTML width/height 就成了空架子——这时候必须 fallback 到 CSS aspect-ratio 或 JS 注入占位尺寸。
