<p>用 box-sizing: border-box 是构建稳定模态框的底线，否则 padding 和 border 会撑破设定的宽高，导致移动端错位、溢出及滚动异常；需全局设置 * { box-sizing: border-box; } 并配合 min-height: 100vh、flex 居中、flex 子项收缩与 overflow-y: auto 等策略确保尺寸可控。</p>
直接说结论：用 box-sizing: border-box 是构建稳定模态框的底线，否则 padding 和 border 会撑破你设好的 width 或 height，尤其在移动端或内容动态变化时极易错位、溢出、滚动异常。
为什么必须全局设 box-sizing: border-box
默认的 content-box 模式下，给一个 .modal-content 设 width: 400px; padding: 20px; border: 2px solid #ccc，实际占宽是 444px —— 这不是 bug，是标准行为，但模态框最怕尺寸失控。一旦内容区域超出容器，就会触发意外滚动或遮罩层失效。
- 所有现代项目都应加这条重置：
* { box-sizing: border-box; }（含::before和::after） - 别只给模态框局部加，否则父容器（比如
.modal-overlay）仍按content-box计算，flex 布局居中可能偏移 - IE9+ 和所有现代浏览器原生支持，无兼容风险
flex 居中失效？先检查父容器高度是否真实撑满视口
常见现象：写了 display: flex; justify-content: center; align-items: center，但模态框还是贴顶或偏上。根本原因不是 flex 写错了，而是父级没高度。
-
html和body必须设min-height: 100vh（不是height: 100%，后者依赖父高，而html默认没高） - 遮罩层（如
.modal-overlay）要用position: fixed; top: 0; left: 0; width: 100%; height: 100vh，100vh比100%更可靠 - 避免在遮罩层上设
overflow: hidden或padding，这会干扰 flex 轴向尺寸计算
内容区高度失控？用 flex 子项收缩 + overflow-y: auto
模态框常含固定头部/底部 + 可滚动正文，若不约束，内容一多就撑爆整个视口，遮罩层被顶开。
立即学习“前端免费学习笔记（深入）”；
- 结构上分三块：
.modal-header、.modal-body、.modal-footer -
.modal-body设flex: 1; overflow-y: auto; padding: 16px，靠border-box确保 padding 不额外增高 - 别给
.modal-body设固定height，它应随 flex 剩余空间自适应；需要最小高度可用min-height: 0防止 collapse - 移动端注意：iOS Safari 对
overflow: auto在 fixed 容器里渲染不稳定，可加-webkit-overflow-scrolling: touch
dialog 元素的盒模型陷阱
<dialog> 是原生模态框，但它默认不继承 box-sizing: border-box，且 ::backdrop 伪元素不能设 padding 或 border —— 所有样式只能作用于 dialog 本体和其子元素。
- 必须显式写：
dialog { box-sizing: border-box; width: 90vw; max-width: 500px; } -
dialog::backdrop只能调背景色、透明度，不能设内边距；遮罩层交互逻辑得靠 JS 绑定 click 事件，不能依赖 CSS 控制 - Chrome/Edge 支持良好，Firefox 需要
dialog.showModal()显式调用，Safari 16.4+ 才支持，旧版需 polyfill - 不要给
<dialog>外层再套遮罩 div —— 它自带::backdrop，重复叠加易导致 z-index 冲突或 pointer-events 错乱
真正难的不是让模态框“弹出来”，而是让它在各种内容长度、屏幕尺寸、滚动状态、第三方组件共存时，始终严丝合缝地待在该在的位置——盒模型就是那个沉默但决定成败的底层规则。
