元素实际宽高超出设定值是因默认content-box模型下padding和border额外增加尺寸，解决方法是使用box-sizing: border-box，使width包含padding和border，推荐全局设置*{box-sizing:border-box}以统一盒模型行为，避免布局撑开。
在CSS中，元素的宽度（width）和高度（height）默认只包括内容区域，而内边距（padding）、边框（border）和外边距（margin）是额外计算的。当你给一个设置了固定 width 的元素添加 padding 时，实际占用的空间会超过设定的 width，从而导致布局“撑开”——这就是所谓的“padding影响宽高计算”问题。
盒子模型：content-box 与 border-box
浏览器默认使用 content-box 盒模型：
- 元素总宽度 = width + padding-left + padding-right + border-left + border-right
- 总高度同理
- 这意味着 padding 会增加元素的实际尺寸
例如：
.box {
width: 200px;
padding: 20px;
border: 5px solid #000;
}
这个元素在页面中实际占用的宽度是：200 + 20×2 + 5×2 = 250px。如果你在一个 200px 宽的容器里放它，就会溢出。
立即学习“前端免费学习笔记（深入）”；
解决方案：使用 box-sizing: border-box
将盒模型改为 border-box 可以解决这个问题：
- 设定的 width 包括 content + padding + border
- padding 和 border 不再“撑大”元素
- 更符合视觉上的尺寸预期
推荐全局设置：
*,
*::before,
*::after {
box-sizing: border-box;
}
这样所有元素都使用 border-box 模型，padding 不会影响你设定的 width 和 height。
实际应用建议
- 始终在项目开始时重置 box-sizing，避免后期布局错乱
- 如果必须用 content-box，手动计算 padding 后的内容宽度（如 width: calc(100% - 40px)）
- flex 或 grid 布局中，即使用了 border-box，也要注意 padding 是否影响对齐
基本上就这些。关键在于理解盒模型机制，并统一使用 border-box 来规避 padding 导致的尺寸失控问题。不复杂但容易忽略。
