如何在CSS中准确计算元素的总高度

元素总高度=height+padding+border，margin不计入；box-sizing: border-box使height包含padding和border；clientHeight含padding不含border，offsetHeight含padding和border，scrollHeight为内容实际所需高度。

元素总高度 = height + padding + border，但 margin 不算在内

元素的「总高度」指的是它在页面中实际占据的垂直空间，不等于 height 值本身。默认 box-sizing: content-box 下，计算公式是：height（内容区高）+ padding-top + padding-bottom + border-top-width + border-bottom-width。注意：margin-top 和 margin-bottom 虽然影响布局间距，但不属于该元素自身的总高度范畴——它只是推开了相邻元素。

用 box-sizing: border-box 可让 height 包含 padding 和 border

当你写 height: 100px 且未改 box-sizing，实际总高度很可能远超 100px；加了 box-sizing: border-box 后，这 100px 就是最终「内容 + 内边距 + 边框」的总和，更符合视觉预期。

1. 全局推荐加这一句重置：* { box-sizing: border-box; }（或更严谨地：*::before, *::after, *）
2. IE8+ 原生支持 box-sizing，无需前缀；旧版 Firefox/Safari 曾需 -moz-box-sizing / -webkit-box-sizing，现在基本可忽略
3. 注意：即使设了 border-box，margin 仍不参与计算，也不被包含在 height 中

clientHeight、offsetHeight、scrollHeight 的区别直接影响 JS 获取逻辑

JS 中读取高度时，选错属性会导致值偏差明显：

1. element.clientHeight：内容区高 + 上下 padding，不含 border、margin、滚动条（但若存在水平滚动条，会减去其高度）
2. element.offsetHeight：内容区高 + 上下 padding + 上下 border，含可见滚动条（若有）
3. element.scrollHeight：内容实际所需高度（含溢出部分），即「想完全显示所有内容所需的最小 clientHeight」，含 padding，不含 border 和 margin
4. 三者都返回整数，如需小数值，统一用 element.getBoundingClientRect().height

行内元素、绝对定位、flex 子项的 height 行为特殊

height 对很多元素无效或基准缺失，不是计算错了，而是压根没起作用：

1. 普通行内元素（如 <span>）无视 height，其“高度”由 line-height + 字体大小 + 上下 padding 共同撑开
2. 非绝对定位、非 flex 容器子项的 height: 100% 往往失效——因为父级 height 是 auto，百分比无参照基准
3. 绝对定位元素设 height: 100% 时，参考的是最近定位祖先的 padding-box 高度（不是 content-box），这点容易被忽略
4. flex 子项的 height 在主轴为 vertical 时可能被 align-items 或 flex 缩放覆盖，需配合 align-self 或显式 flex-shrink: 0

真正卡住人的，往往不是公式记错，而是忘了 box-sizing 没重置、父容器高度为 auto 却写了 100%、或者把 offsetHeight 当成可滚动内容全高来用。这些地方一错，调试时数值对不上，就只能靠 getBoundingClientRect() 硬核验证。