box-sizing: border-box 未生效最常见原因是选择器权重不足或被更高优先级规则覆盖，如框架样式中含 !important；height 计算不准常因父容器无高度导致百分比失效，或受 flex/grid、transform 等影响；需用 offsetHeight 获取真实总高，注意 SSR 和隐藏元素限制。
box-sizing: border-box 为什么没生效
最常见的原因是 CSS 选择器权重不够，或者被后续更具体的规则覆盖。比如你写了 div { box-sizing: border-box; }，但框架（如 Bootstrap）或组件库的样式里有 .container { box-sizing: content-box !important; }，就会直接覆盖。
检查方式很简单：打开浏览器开发者工具，选中元素，在 Styles 面板里看 box-sizing 是否显示为 strike-through（划掉），如果是，就说明被覆盖了。
- 优先用更具体的选择器，比如
div.my-card { box-sizing: border-box; } - 避免滥用
!important，但调试时可临时加来确认是否是覆盖问题 - 全局重置建议写在最前面（如
* { box-sizing: border-box; }），但注意它不继承，且对替换元素（、）可能有副作用
border-box 下 height 计算仍不准的典型场景
即使设了 box-sizing: border-box，如果元素设置了 height: 100px，又同时有 padding 和 border，那内容区会自动压缩——这是预期行为。但很多人误以为“总高度 = height”，其实它就是总高度（含 padding + border），只是内容区域变小了。
真正出问题的情况往往是：
立即学习“前端免费学习笔记（深入）”；
- 父容器未设置高度，子元素用
height: 100%—— 此时百分比高度无效，box-sizing也救不了 - 用了
flex或grid布局，但没控制主轴尺寸，导致子项拉伸/压缩行为干扰高度表现 - 存在
transform: scale()或zoom，视觉上变大但不影响盒模型计算
验证方法：把 border 设为显眼颜色（如 2px solid red），再用开发者工具的盒子模型视图看各层尺寸是否吻合。
需要精确总高度时的可靠做法
如果业务逻辑依赖「元素渲染后的真实像素总高度」（比如滚动定位、动画起止点、Canvas 绘图对齐），光靠 CSS 不够，得用 JS 获取。
offsetHeight 是最常用且兼容性最好的属性，它返回的就是包含 border、padding、内容高度（不含 margin）的整数像素值。
const el = document.querySelector('.my-element');
console.log(el.offsetHeight); // ✅ 包含 border + padding + content height注意：clientHeight 不含 border，scrollHeight 可能含溢出内容，别混用。
- 若元素尚未挂载或
display: none，offsetHeight返回 0 —— 需确保 DOM 已渲染且可见 - 响应式场景下，监听
resize或使用ResizeObserver更稳妥 - 服务端渲染（SSR）中无法访问这些属性，需在
useEffect（React）或mounted（Vue）钩子里读取
border-box + 固定总高度的组合陷阱
当你写 height: 200px; box-sizing: border-box;，并希望无论 padding/border 怎么变，总高永远是 200px —— 这本身是对的。但一旦加上 min-height 或 max-height，行为就变了。
例如：
.card {
height: 200px;
max-height: 200px;
padding: 20px;
border: 5px solid #333;
box-sizing: border-box;
}这时候如果内容撑高了，max-height 会截断，但 height: 200px 仍强制总高为 200px（含边框），所以内容区只剩 200 - 20*2 - 5*2 = 150px。但如果删掉 height，只留 max-height，总高就由内容决定，box-sizing 就只影响内部分配。
容易被忽略的一点：box-sizing 对 width 和 height 的作用完全对称，但日常开发中人眼更敏感于垂直方向的高度错位，所以问题暴露得更早。
