<p>元素宽高计算不准确主因是盒模型（content-box）下width/height不含padding和border，或受box-sizing设置、父容器限制、替换元素固有尺寸、margin折叠等影响；推荐全局设* { box-sizing: border-box; }并用开发者工具实时验证布局。</p>
元素宽高计算不准确，大概率是因为盒模型（box-sizing）被修改过，或者存在边框、内边距、外边距等未被正确计入的尺寸影响。默认情况下，CSS 使用的是 content-box 盒模型，此时设置的 width/height 仅指内容区域，不包含 padding 和 border —— 这是最容易引发“明明设了 200px 却撑开成 220px”这类问题的原因。
确认当前使用的盒模型
检查元素是否被显式设置了 box-sizing 属性：
- 查看开发者工具中该元素的 Computed 面板，搜索 box-sizing，确认值是
content-box还是border-box - 在 Styles 面板中查找是否有类似
box-sizing: border-box;的声明（可能来自重置样式、UI 框架如 Bootstrap，或自定义 CSS） - 注意继承：虽然
box-sizing不会继承，但父级规则可能通过通配符（如* { box-sizing: border-box; }）全局生效
统一使用 border-box（推荐做法）
为避免反复踩坑，建议在项目开头就重置盒模型：
- 在 CSS 最上方添加：
* { box-sizing: border-box; }（注意性能影响极小，现代浏览器优化良好） - 更稳妥写法（兼容旧版）：
*, *::before, *::after { box-sizing: border-box; } - 此后所有元素的 width/height 都包含 padding 和 border，所见即所得，计算更直观
排查其他影响尺寸的隐藏因素
即使盒模型一致，以下情况也会导致宽高“看起来不准”：
立即学习“前端免费学习笔记（深入）”；
- 父容器有
overflow: hidden或flex/grid布局限制，导致子元素被裁剪或压缩 - 图片、表单控件等替换元素（replaced elements）有默认宽高或固有尺寸，可能覆盖 CSS 设置
- 字体大小、行高、垂直对齐方式（如
vertical-align: baseline）影响行内元素的占位高度 - margin 折叠（尤其是相邻块级元素的上下 margin）会让实际间距小于预期
快速验证与调试技巧
不用猜，用工具直接看真实尺寸：
- Chrome/Firefox 开发者工具中，鼠标悬停在 Elements 面板的 HTML 节点上，会显示实时的 layout 边框（含 content/padding/border/margin 区域）
- 右键元素 → “Break on” → “Attribute modifications”，可监听
style变动，排查 JS 动态改样式导致的尺寸变化 - 临时加一句
outline: 2px solid red;（outline 不占布局空间），能清晰对比视觉尺寸与盒模型边界
