弹窗内容区被padding撑大本质是box-sizing: content-box默认行为所致：width仅指内容区，padding额外叠加；须显式设.box-sizing: border-box并验证computed面板生效，同时约束图片、文本及flex子项收缩能力。
弹窗内容区被padding撑大，本质是box-sizing: content-box在作祟
你写width: 500px + padding: 20px，浏览器默认按box-sizing: content-box算：内容区占500px，再额外加左右40px padding，总宽变成540px——父容器若没预留空间，就直接溢出。这不是弹窗组件的问题，是所有块级元素的默认行为。
必须给弹窗内容区显式设box-sizing: border-box
只靠全局* { box-sizing: border-box }不够保险，尤其弹窗常由第三方库动态插入（比如Antd.Modal或Bootstrap Modal），其内部.modal-content可能被更高优先级样式覆盖回content-box。
- 直接加固关键选择器：
.modal-content, .dialog-body, .popup-inner { box-sizing: border-box; } - 如果弹窗用伪元素做遮罩或装饰（如
::before盖阴影），也得单独加：.modal::before, .modal-content::before { box-sizing: border-box; } - 进 Chrome DevTools 的「Computed」面板查
box-sizing值，别只看 Styles 面板有没有那行声明
max-width和min-width同样受box-sizing影响，漏掉就白改
很多人只改了width，却忘了max-width: 90%或min-width: 320px也走同一套计算逻辑。一旦内容区本身有padding，又没设border-box，max-width: 90%照样会撑破视口。
- 所有涉及尺寸的属性都要同步检查：
width、max-width、min-width、height、max-height - 移动端尤其危险：
width: 100vw+padding: 16px= 实际宽度 > 视口，必然触发横向滚动条 - 安全写法：
width: 100%; max-width: 500px; padding: 16px; box-sizing: border-box;
真正容易被忽略的：padding不是唯一“撑大”元凶
就算box-sizing生效了，弹窗仍可能超宽——这时问题往往藏在别处：
-
<img>没设max-width: 100%，一张原图直接顶破边界 - 长URL或无空格文本（如
https://very-long-domain-name.example/path?param=value）触发强制换行失效，撑开容器 - 父容器用了
display: flex但子项没加min-width: 0，flex项拒绝收缩，padding再小也顶不住 -
transform: translate(-50%, -50%)和width: 100%同时作用于同一元素，在 Safari 中会导致宽度计算基准错乱
查完box-sizing，下一步该盯住图片约束、文本截断和 flex 收缩能力——这些才是现代弹窗溢出的真正高频原因。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
