Canvas默认inline导致底部留白，应设vertical-align:top或display:block；width/height属性决定分辨率，CSS仅控制显示尺寸；Flex居中需父容器定宽高并设display:block；绝对定位不影响内部坐标系。
Canvas 元素默认是 inline 水平，会受文本基线影响
直接写 时，它表现得像一个字母（比如 x），底部对齐父容器的 baseline，导致下方留白——这不是 margin 或 padding，而是 vertical-align 的默认行为。常见现象：Canvas 下方多出几像素空白，紧贴其后的元素被顶开。
-
解决方法：给
设置vertical-align: top、middle或bottom（推荐top） - 或者改显示类型：
display: block（最常用，彻底脱离行内流） - 避免用
float布局，现代项目优先用 Flex 或 Grid
用 CSS 定位 Canvas 时 width/height 必须和 canvas.width/canvas.height 区分开
CSS 的 width 和 height 只控制渲染尺寸，不改变绘图坐标系；真正决定画布“分辨率”的是 canvas.width 和 canvas.height 属性（注意：不是 HTML 属性，是 JS 属性或 DOM 属性）。混淆会导致图像模糊、拉伸或缩放失真。
- 正确做法：先设 HTML 属性或 JS 赋值
canvas.width = 800、canvas.height = 600，再用 CSS 控制显示大小（如width: 100%; height: auto） - 错误写法：
—— 此时画布实际渲染分辨率为 300×150（浏览器默认），会被 CSS 拉伸 - 响应式场景下，需监听
resize并同步更新canvas.width/canvas.height，再重绘
Canvas 在 Flex 容器中居中定位的可靠写法
Flex 是目前最简洁可控的 Canvas 布局方式，但要注意主轴方向与对齐属性的组合逻辑。
-
justify-content控制水平，align-items控制垂直（对单个子项有效） - 确保父容器有明确宽高（如
100vh），否则 Flex 无法计算居中基准 - Canvas 本身仍建议加
display: block，避免 inline 行内特性干扰 - 若 Canvas 需要响应式缩放，不要只靠
flex: 1，应结合 JS 动态重设width/height
绝对定位 Canvas 时，坐标原点 (0,0) 始终是画布左上角，不受 position 影响
position: absolute 改变的是 Canvas 元素在页面中的位置，不影响其内部绘图坐标系。这点常被误认为“Canvas 坐标会跟着偏移”。
立即学习“前端免费学习笔记（深入）”；
- 例如：
canvas.style.left = "50px"后，ctx.fillRect(0,0,10,10)仍从 Canvas 左上角开始画，只是整个 Canvas 被挪到了距左侧 50px 处 - 如果想让绘图内容随定位偏移，需手动平移上下文：
ctx.translate(50, 0) - 绝对定位 +
top/left值后，记得给父容器加position: relative，否则会相对于 viewport 定位
width/height 的双重含义，以及 inline 元素的 vertical-align 隐形干扰——这两个点踩中一个，布局就容易失控。 
