<p>box-sizing: border-box 使 width 包含 padding 和 border，设为该值后按钮总宽即为指定宽度，内容区自动压缩；推荐全局设置 * { box-sizing: border-box; }，调试应以盒模型图示或 getBoundingClientRect() 为准。</p>
box-sizing: content-box 是默认行为，宽度只算内容区
浏览器默认用 content-box，这时候你写 width: 100px，实际总宽度 = 100px + 左右 padding + 左右 border。按钮加了 padding: 12px 20px，左右内边距共 40px，再加个 border: 2px solid #ccc（左右边框 4px），最终按钮占位就是 144px，超出预期。
常见错误现象：明明设了 width: 100% 或固定像素，按钮却撑出容器、换行、或和相邻元素对不齐。
- 使用场景：需要按钮严格贴合父容器宽度，或做栅格布局时横向等宽排列
- 解决办法：直接在按钮上加
box-sizing: border-box - 兼容性无风险：
border-box在所有现代浏览器及 IE8+ 都支持
box-sizing: border-box 让 width 包含 padding 和 border
设为 border-box 后，width 指的是“从左 border 边到右 border 边”的总宽。内边距和边框不再额外加进去，而是从这个宽度里“挤出来”。比如：
button {
width: 100px;
padding: 12px 20px;
border: 2px solid #ccc;
box-sizing: border-box;
}此时按钮总宽度就是 100px，内容区实际只有 100px − 40px − 4px = 56px 宽 —— 但你不用手动算，浏览器自动分配。
立即学习“前端免费学习笔记（深入）”；
- 参数差异：
content-box是“内容宽 + 填充 + 边框”，border-box是“总宽 = 内容宽 + 填充 + 边框” - 性能影响：零开销，纯渲染逻辑切换，不影响重排重绘频率
- 建议统一设置：
* { box-sizing: border-box; }可避免后续反复覆盖
padding 值影响内容可点击区域，但不改变 width 计算逻辑
padding 不会触发重排，但它直接影响按钮的交互热区大小。即使 box-sizing 是 border-box，增大 padding 会让文字离边缘更远、点击更舒适，同时压缩内容区空间 —— 这正是你想要的“视觉变大但布局不破”的效果。
- 水平 padding 直接吃掉可用内容宽度，注意文字是否被截断（尤其
white-space: nowrap场景） - 垂直 padding 影响行高表现，若按钮内是单行文本，
line-height和padding共同决定高度，别只靠height - 不要用
padding替代margin控制外间距 —— 它们语义和层叠行为完全不同
调试时怎么看真实尺寸？别只信 CSS 面板的 width 值
浏览器开发者工具里，元素面板显示的 width 值永远是 CSS 中写的那个值，不是最终渲染宽度。真正要看“占了多少像素”，得看右侧的盒模型图示（Layout / Box Model 标签页），那里会标出 content、padding、border、margin 的具体数值。
- 容易被忽略的点：设置了
box-sizing: border-box，但父容器有font-size: 0或letter-spacing，导致子元素内联换行/空白被压缩，间接影响 padding 视觉对齐 - 复杂点在于：如果按钮用了
transform: scale()或zoom，盒模型尺寸计算会被绕过，此时 DevTools 显示的像素值可能和 layout 表现不一致 - 最稳的验证方式：用
getBoundingClientRect()在控制台里取width属性值，它返回的是真实渲染像素
