button默认box-sizing:content-box，且受浏览器ua样式影响（如chrome的padding、firefox的inset边框、safari系统渲染），导致宽高不准；需同步设置box-sizing:border-box、重置padding/border/vertical-align，并用padding+line-height替代height控制高度。
button 默认是 content-box，但浏览器 UA 样式又偷偷加了 padding/border
button 元素在规范中确实默认 box-sizing: content-box，和 div 一样——但这只是“纸面规则”。真正起作用的是浏览器内置的 UA 样式：Chrome 给 button 加了约 padding: 6px 12px、Firefox 加了 border: 1px inset、Safari 甚至用系统控件渲染并忽略部分 CSS 继承。结果就是：你写 width: 100px，实际渲染宽度 = 100px（内容区） + 左右 padding + 左右 border，而 div 默认 padding/border 都是 0，所以看起来“button 总比 div 宽”。
button 的 display 类型是 inline-block，div 是 block，影响盒模型参与计算的方式
button 默认 display: inline-block，div 默认 display: block。这导致两件事：
- inline-block 元素会受
vertical-align: baseline影响，和同行文字基线对齐，视觉上“飘起来”，而 block 元素独占一行、无此干扰 - inline-block 在 Flex 容器中会触发 Safari 的
min-width: min-content保护机制（尤其当flex: 1 0 0时），哪怕你设了width: 100%，它也可能撑开容器；div作为 block，在 Flex 里默认min-width: 0，行为更可预测
不同浏览器对 button 的“怪异处理”远超 div
div 是纯 CSS 盒子，UA 样式极简；button 却被各大浏览器当作“系统控件”特殊对待：
- Safari 15+ 和部分 Android WebView 会无视通配符
* { box-sizing: border-box; }，坚持用 UA 样式里的content-box解析 button - Firefox 的
1px inset边框不是纯视觉装饰，它参与布局计算，且无法用border: none彻底清除（需border: 1px solid transparent） - IE8 虽支持
box-sizing，但对 button 的line-height解析异常，文字常偏上，div则没这个问题
统一 button 和 div 宽高的最小可靠方案
别指望只改 box-sizing 就能拉平——必须四点同步：
- 显式声明
button { box-sizing: border-box; }（通配符不够，Safari 会绕过） - 重置基础样式：
button { margin: 0; padding: 8px 16px; border: 1px solid #ccc; font: inherit; vertical-align: middle; } - 高度控制弃用
height，改用min-height: 36px; line-height: 20px; padding: 8px 16px; - 若用于 Flex 布局，务必补一句
button { min-width: 0; }，关掉 Safari 的隐式保护
最易被忽略的点：button 的 UA 样式不透明、不可见，调试时看到“没写 padding 却有空白”，第一反应不该是清缓存，而是查 computed styles 里 padding/border 的来源——它大概率来自 user agent stylesheet，而不是你的代码。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
