小屏幕弹窗溢出的根本解法是盒模型、内容约束与定位逻辑协同修复：必须全局设置*, *::before, *::after { box-sizing: border-box; }，配合width: 90%; max-width: 500px; margin: 20px auto，并为图片加max-width: 100%、长文本加word-break: break-word，框架弹窗需精准作用于最外层容器。
小屏幕弹窗溢出，根本不是“宽度设小点就行”，而是盒模型计算 + 内容约束 + 定位逻辑三者同时失控。只调 width 或只加 overflow: hidden 都是治标不治本。
box-sizing: border-box 必须全局生效
几乎所有小屏弹窗右侧被切、按钮消失、内边距撑破容器的问题，根源都在这里。默认 content-box 下，padding: 20px 和 border: 1px 会额外加在你写的 width: 90% 外面——实际宽度可能是 90% + 42px，必然溢出。
- 必须写
*, *::before, *::after { box-sizing: border-box; }，只给弹窗容器加没用 - 检查开发者工具「Computed」面板，确认目标弹窗元素的
box-sizing真的是border-box，而不是被 Bootstrap 或其他 CSS 覆盖了 - 特别注意伪元素（比如用
::before做遮罩层或装饰），漏掉它们就等于留了个溢出口
width + max-width 组合比单设 width 更可靠
固定 width: 500px 在手机上一定溢出；只写 width: 90% 在大屏上又太窄。二者结合才是小屏适配的稳定基线。
- 推荐写法：
width: 90%; max-width: 500px; margin: 20px auto; -
margin: 20px auto能防止右侧被裁切，但对position: fixed弹窗无效——此时得改用left: 20px; width: calc(100% - 40px); - 想更平滑缩放？可用
width: clamp(300px, 90%, 500px);，但 IE 不支持，现代浏览器没问题
内容本身必须受控，否则盒子再稳也白搭
图片、长 URL、无空格文本、Flex 子项里的 input，都会无视盒子尺寸直接撑开。这些不是“溢出问题”，是“内容失控问题”。
- 图片统一加：
max-width: 100%; height: auto; - 长单词或 URL：用
word-break: break-word;（比break-all更友好） - 弹窗内有表格？必须配
table-layout: fixed; width: 100%;，否则max-width对它无效 - Flex 容器里放按钮和文字？给文字元素加
flex-shrink: 0，否则 Flex 会先压缩文字再考虑截断
modalDialog 类弹窗要绕过框架默认限制
R Shiny 的 modalDialog()、Bootstrap 的 .modal-dialog 都自带默认尺寸逻辑，直接写 CSS 很容易被覆盖。不能只靠样式表硬顶。
- Shiny 中优先用
style = "width: 80%; max-width: 600px;"+size = "l"双保险 - Bootstrap 弹窗若居中错位，别信
margin: auto——position: fixed下它无效，改用top: 50%; left: 50%; transform: translate(-50%, -50%)，但注意这会破坏滚动行为，需额外加max-height: 80vh; overflow-y: auto; - 所有框架弹窗，都要检查其生成的 DOM 结构，找到最外层容器（通常是
.modal-dialog或.shiny-modal），把样式精准打到那一层
真正麻烦的从来不是宽度怎么设，而是你改了 width 却没意识到 box-sizing 没生效、图片没加 max-width、框架又悄悄重写了 max-width。每一步都得验证，而不是“写了就以为好了”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
