父容器无宽度导致图片缩放异常：因塌陷为0宽，max-width:100%参照视口而非预期区域；需显式设父容器max-width、用Flex居中时配justify-content/align-items、absolute定位前加position:relative。
父容器没宽度，max-width: 100% 就失去参照
图片加了 max-width: 100% 和 height: auto，缩放后却贴左/贴右甚至跑出视口——不是 CSS 写错了，而是父容器（比如一个 <div>）压根没宽度。它默认是 width: auto，如果内部只有图片、没文字也没其他块级内容，又没设 max-width 或 width，这个容器就会塌陷为 0 宽。结果图片的 100% 是按整个视口算的，不是你预期的“卡片区域”。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 给父容器显式加
max-width: 1200px（或你需要的值） +margin: 0 auto - 避免仅靠
text-align: center居中：它对行内元素有效，但若父容器塌陷或用了float/position: absolute，就失效 - 用 Chrome DevTools 的 “Layout” 面板检查父容器实际渲染宽度，别只看代码
vertical-align 默认值在新版浏览器里更“较真”了
<img> 默认是 display: inline，垂直位置完全由 vertical-align 控制，默认值是 baseline。Chrome 120+、Safari 17+ 对基线对齐的计算更严格，哪怕父容器里只有空格或换行符，都可能让图片下移几像素，看起来像“偏了”。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 统一加
img { vertical-align: top; }或middle，别依赖默认值 - 如果要彻底脱离行内流，直接写
img { display: block; }—— 这比调vertical-align更干净 - 检查是否被 CSS 重置库（如 modern-normalize）悄悄改了
img的默认vertical-align
Flex/Grid 布局下，margin: auto 和 vertical-align 全部失效
把父容器从 block 改成 display: flex 后，图片突然不居中了？不是 bug，是机制切换：vertical-align 在 Flex 容器里完全不生效；margin: auto 也会被 justify-content / align-items 覆盖。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- Flex 下居中必须配齐三样：
display: flex、justify-content: center、align-items: center - 别忘了父容器得有高度参照，比如
min-height: 400px或height: 100vh，否则align-items没空间可居中 - 避免在 Flex 容器里还写
margin-top: -10px微调——它还在，但视觉上被对齐规则“盖住”了
用 position: absolute 却没设 position: relative 的父容器
手机端图片突然“飞走”，PC 看着好好的——大概率是 position: absolute 的定位上下文错了。它会逐级往上找最近的 position: relative 祖先；如果没找到，就落到 <html> 或 <body> 上。而移动端 viewport 缩放、字体放大都会让 body 尺寸和 PC 不一致，导致绝对定位坐标漂移。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 给图片的**直接父容器**加
position: relative，别指望祖父辈容器兜底 - 避免把
absolute图片塞进 Flex/Grid 容器里再定位——布局模型混用容易触发渲染差异 - 调试时用 DevTools 选中图片，看右侧面板里 “Computed” 下的
top/left值是相对谁计算的
!important 有用得多。 
