dialog 默认 box-sizing 为 content-box，需显式设 border-box 才能稳定控尺寸；须单独声明而非依赖通配符；border 后需处理 outline 可访问性；居中用 transform 而非 margin；backdrop 不支持 padding/border；表单控件在 dialog 内需重申 box-sizing。
dialog 默认是 content-box，但 padding 和 border 会撑开宽度
<dialog></dialog> 元素在所有现代浏览器中默认使用 box-sizing: content-box。这意味着你设的 width: 100% 或 width: 400px 只管内容区，一旦加了 padding 或 border，整个弹窗就会变宽，可能溢出视口或遮罩层。
常见错误现象：dialog { width: 90%; padding: 24px; } 在窄屏下横向滚动；border: 2px solid #ccc 后弹窗右侧被截断。
- 必须显式设置
box-sizing: border-box，否则无法稳定控制尺寸 - 不能只写
* { box-sizing: border-box }就完事——<dialog></dialog>是替换元素，某些浏览器（如 Safari）对它的初始计算仍可能绕过通配符重置 - 推荐写法：
dialog { box-sizing: border-box; }单独声明，不依赖继承
dialog 的 border 默认为 none，但设 border 后必须处理 outline 和 focus 样式
原生 <dialog></dialog> 没有默认边框，border 属性完全由你控制。但问题在于：当用户用键盘打开弹窗后，<dialog></dialog> 会获得焦点，触发浏览器默认的 outline（通常是虚线框），和你自定义的 border 叠在一起，视觉混乱。
使用场景：需要高对比边框适配深色模式，或模拟 macOS 系统级弹窗的微妙描边。
- 务必重置
outline: none，但别直接删——改用outline: 2px solid #007aff并配合outline-offset: 2px做可访问性聚焦反馈 -
border-radius建议设为8px起步，避免 Chrome/Firefox 渲染差异导致圆角锯齿 - 不要用
border-image——<dialog></dialog>不支持该属性的可靠渲染，且会覆盖border-style
dialog::backdrop 的盒模型与 margin-collapse 无关，但会影响 dialog 定位
dialog::backdrop 是一个伪元素，它本身没有传统盒模型中的 margin、padding 或 border（设了也无效），但它是一个全屏定位层，z-index 固定为 -1，且不参与文档流。
容易踩的坑：给 dialog 设了 margin: 20px，以为能居中留白，结果发现弹窗紧贴视口边缘——因为 dialog 默认是 position: absolute，margin 在绝对定位下不触发外边距合并，但也不会自动居中。
- 正确居中方式：用
top: 50%; left: 50%; transform: translate(-50%, -50%)，而非依赖 margin -
dialog::backdrop的背景色必须显式设置，例如background-color: rgba(0,0,0,0.6)，否则 Safari 下可能全黑或透明失效 - 不要给
dialog::backdrop设padding或border——这些属性被忽略，CSS 验证器会报 warning
表单控件嵌套在 dialog 中时，box-sizing 必须单独重申
即使你已全局设置了 input, button { box-sizing: border-box }，在 <dialog></dialog> 内部，Chrome 和 Firefox 仍可能对 <input type="text"> 或 <button></button> 应用 UA 样式中的 box-sizing: content-box，尤其在 macOS 上。
性能影响不大，但会导致输入框宽度错乱：比如父 dialog 宽 400px，内含 input { width: 100%; padding: 12px; }，实际输入框宽度变成 424px。
- 必须在
dialog作用域内再次声明：dialog input, dialog textarea, dialog button { box-sizing: border-box; } - 不要省略
textarea——它在旧版 Safari 中盒模型行为更不稳定 - 如果用了 CSS-in-JS 或 Shadow DOM，需确保该规则能穿透作用域边界，否则依然失效
最易被忽略的一点：dialog 的 min-width 和 max-width 计算始终基于 content-box，哪怕你设了 box-sizing: border-box ——所以当内容动态加载时，得靠 JS 监听 resize 或用 fit-content + min(max)-content 组合兜底。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
