iframe默认使用content-box盒模型，其width/height仅指内容区，border和padding会额外增加总宽高；需全局设box-sizing:border-box并配合max-width:100%等约束防溢出。
iframe 默认走 content-box 盒模型
iframe 是替换元素（replaced element），但它的尺寸计算逻辑和普通块级元素一致：浏览器默认按 box-sizing: content-box 解析 width 和 height。也就是说，你写 width: 100% 或 width: 400px，这个值只管内容区，不包含 border 和 padding。一旦加了 border: 2px solid #000 或 padding: 10px，总宽度就变成 100% + 4px 或 400px + 20px——超出父容器，触发水平滚动或错位。
为什么给 iframe 单独设 box-sizing: border-box 不一定生效
部分浏览器（尤其是旧版 Safari、IE）对 iframe 的 box-sizing 支持不一致；更关键的是，很多 UI 框架或重置样式（如 Normalize.css）会显式给 iframe 设 box-sizing: content-box，覆盖你的局部设置。所以光写：
.my-iframe { box-sizing: border-box; width: 100%; border: 2px solid #333; }
可能没用。必须确保它没被更高优先级规则覆盖，且浏览器支持该行为。
- 检查开发者工具的 “Computed” 面板，确认
box-sizing真的为border-box - 若无效，改用更稳妥的包裹方案：把
iframe套进一个div容器，让容器承担边框/内边距，iframe自身只负责内容填充 - 对老浏览器兼容要求高时，放弃
box-sizing，改用calc()手动减去边框和内边距，例如：width: calc(100% - 4px);
响应式场景下，width: 100% + border 更容易出问题
当父容器本身是 flex 或 grid 子项，且未设 min-width: 0 时，即使 iframe 用了 border-box，它仍可能因内部内容（比如长 URL、未换行文本）撑开，导致整体溢出。这不是 border 的锅，而是 min-width: auto 的默认行为在作祟。
- Flex 子项需配合
min-width: 0才允许收缩，否则border-box也救不了 -
iframe内容不可控时，建议在外层容器加overflow: hidden或max-width: 100%双保险 - 真正要自适应宽高比（如 16:9 视频），别依赖
iframe自身宽高，用 padding-top 百分比 + 绝对定位容器更可靠
真正容易被忽略的点
很多人改完 width 就以为万事大吉，却忘了 max-width 和 min-width 同样受 box-sizing 影响。如果父容器设了 max-width: 500px，而你给 iframe 加了 padding: 15px 但没配 box-sizing: border-box，它照样会突破 500px。这在嵌入第三方仪表盘或地图时特别常见。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
