img元素需设box-sizing: border-box才能确保width/max-width按总宽计算，避免在带padding/border的响应式容器中溢出或错位。
因为默认的 content-box 模型会让图片的实际占用宽度脱离预期，而 box-sizing: border-box 能让 width 值真正代表“你看到的盒子总宽”——这对响应式中用百分比、max-width 或 Flex 容器约束图片时，是尺寸可控的前提。
为什么 img 元素在响应式容器里会“撑破”父级
常见现象：给 img 设置 width: 100%，但父容器有 padding: 16px 和 border: 2px solid #ccc，结果图片溢出。
原因在于：默认 box-sizing: content-box 下，width: 100% 只管内容区，不包含 padding 和 border；父容器的总宽度 = 内容宽 + 左右 padding + 左右 border，而图片只占“内容宽”，视觉上就顶到边框内侧了，再加 margin 或其他元素容易错位。
- 修复方式：全局或针对性地对
img应用box-sizing: border-box - 注意：
img是替换元素，部分浏览器对其box-sizing支持较晚（IE8+、现代所有主流浏览器均支持） - 更稳妥做法：统一重置为
* { box-sizing: border-box; }，避免漏掉img、input等替换元素
max-width: 100% 和 box-sizing 的配合逻辑
响应式图片最常用写法是：img { max-width: 100%; height: auto; }。但这仅控制“最大内容宽度”，不解决 padding/border 占用空间的问题。
当父容器是 Flex 或 Grid 项，并设置了 padding，若子 img 未设 box-sizing: border-box，它的 max-width: 100% 仍会相对于“内容区宽度”计算，导致实际渲染时留白不均或换行异常。
- 推荐组合：
img { max-width: 100%; height: auto; box-sizing: border-box; } - 若父容器用了
gap（如 Flex/Grid），box-sizing不影响 gap，但能确保图片自身尺寸与 padding/border 共存不越界 - 不要依赖
width: 100%+padding同时存在却不设box-sizing——这是移动端图片错位的高频原因
Flex 容器中图片尺寸失控的真实原因
把 img 放进 display: flex 的父容器，常出现图片被压缩、拉伸或未填满可用空间。表面看是 flex-shrink 或 flex-basis 问题，但底层常因盒模型混乱加剧。
例如：.gallery { display: flex; padding: 12px; } .gallery img { flex: 1; }。若没设 box-sizing: border-box，每个 img 的 flex-basis 会按 content-box 计算，而父容器的 padding 占据了空间，导致 flex 分配逻辑和视觉呈现脱节。
- 解决方案：给
img加box-sizing: border-box，并显式设置flex-basis: 0配合flex-grow: 1，让分配完全基于剩余空间 - 切记：
flex不改变盒模型类型，它只是布局算法——盒模型仍是尺寸计算的底层依据 - 调试技巧：用浏览器开发者工具检查
Computed面板中的box-sizing和实际width值，比猜更准
真正容易被忽略的点是：图片本身没有 padding 或 border 时，box-sizing 似乎没影响；但一旦它作为子元素嵌套在带内边距/边框的卡片、网格项或媒体对象中，且该父容器又参与响应式流式计算，content-box 就会悄悄放大误差——尤其在多层嵌套、rem/em + 百分比混用时，这种误差会逐层累积。所以不是“要不要设”，而是“设了才能让尺寸逻辑可预测”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
