默认 display: inline 且无内容，故不占文档流高度；需设 width/height 属性定义像素尺寸，并配 display: block 和 css 控制显示大小，否则易变形、跳动或塌陷。
<canvas></canvas> 标签本身不占文档流位置，但它的“占位”行为取决于 CSS 渲染上下文和显式尺寸设置——没设 width 和 height 属性时，它默认是 300×150 像素的块级元素；设了但没配 CSS，依然按属性值渲染；只用 CSS 设宽高（比如 style="width:200px;height:100px;"），会拉伸内容，导致图形变形。
为什么 <canvas></canvas> 看起来“没占位”或突然跳动
常见现象：页面加载后 <canvas></canvas> 区域闪一下、内容错位、父容器高度塌陷。根本原因是它默认为 display: inline（注意：不是 inline-block），且无内容、无边框、无内边距，浏览器无法自动推导高度。
- 没写
width/height属性 → 使用浏览器默认 300×150，但若父容器是 flex 或 grid，可能被压缩或忽略 - 只用 CSS 控制尺寸 →
<canvas></canvas>的像素画布仍为 300×150，CSS 只缩放渲染结果，ctx.scale()或鼠标坐标需手动校正 - 放在
display: inline文本流中 → 会像文字一样对齐基线，下方留白约 4px，可用vertical-align: top消除
width 和 height 属性 vs CSS 尺寸：必须分清两套坐标系
Canvas 有两套尺寸：一个是画布的“真实像素分辨率”（由 width 和 height 属性决定），另一个是它在页面上的“显示尺寸”（由 CSS width/height 或盒模型决定）。二者不一致时，所有绘图都会被浏览器拉伸/压缩。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 正确做法：先设属性
<canvas width="600" height="400"></canvas>，再用 CSS 控制显示大小（如max-width: 100%; height: auto;），并监听resize重置画布像素尺寸 - 错误做法：仅靠
style="width:100%;height:400px"→ 画布仍是 300×150，图形糊成一团 - 鼠标事件坐标需换算：
const rect = canvas.getBoundingClientRect(); const x = (event.clientX - rect.left) * (canvas.width / rect.width);
让 <canvas></canvas> 正常参与布局的最小可靠配置
想让它像 <img> 一样自然撑开容器、响应式、不跳动，就得切断默认 inline 行为，并明确尺寸来源。
- 加
display: block—— 消除基线留白，避免父容器高度塌陷 - 同时设置 HTML 属性
width和height（哪怕只是占位值，如width="1"），防止浏览器 fallback 到 300×150 - 用 CSS 控制显示尺寸时，搭配
image-rendering: pixelated（防缩放模糊）和will-change: transform（提升重绘性能） - 如果嵌在
flex容器里，加flex-shrink: 0防止被压缩失真
最易被忽略的是：Canvas 的“占位”本质是 CSS 盒模型行为，不是标签语义。它没有内在内容，所以任何依赖 min-content 或 fit-content 的布局都会失效——你得亲手告诉它“我有多大”，而不是指望它自己说。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
