元素总高度=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 就是最终「内容 + 内边距 + 边框」的总和，更符合视觉预期。
- 全局推荐加这一句重置：
* { box-sizing: border-box; }（或更严谨地：*::before, *::after, *） - IE8+ 原生支持
box-sizing，无需前缀；旧版 Firefox/Safari 曾需-moz-box-sizing/-webkit-box-sizing，现在基本可忽略 - 注意：即使设了
border-box，margin仍不参与计算，也不被包含在height中
clientHeight、offsetHeight、scrollHeight 的区别直接影响 JS 获取逻辑
JS 中读取高度时，选错属性会导致值偏差明显：
-
element.clientHeight：内容区高 + 上下padding，不含border、margin、滚动条（但若存在水平滚动条，会减去其高度） -
element.offsetHeight：内容区高 + 上下padding+ 上下border，含可见滚动条（若有） -
element.scrollHeight：内容实际所需高度（含溢出部分），即「想完全显示所有内容所需的最小 clientHeight」，含padding，不含border和margin - 三者都返回整数，如需小数值，统一用
element.getBoundingClientRect().height
行内元素、绝对定位、flex 子项的 height 行为特殊
height 对很多元素无效或基准缺失，不是计算错了，而是压根没起作用：
- 普通行内元素（如
<span></span>）无视height，其“高度”由line-height+ 字体大小 + 上下padding共同撑开 - 非绝对定位、非 flex 容器子项的
height: 100%往往失效——因为父级height是auto，百分比无参照基准 - 绝对定位元素设
height: 100%时，参考的是最近定位祖先的padding-box高度（不是content-box），这点容易被忽略 - flex 子项的
height在主轴为 vertical 时可能被align-items或flex缩放覆盖，需配合align-self或显式flex-shrink: 0
真正卡住人的，往往不是公式记错，而是忘了 box-sizing 没重置、父容器高度为 auto 却写了 100%、或者把 offsetHeight 当成可滚动内容全高来用。这些地方一错，调试时数值对不上，就只能靠 getBoundingClientRect() 硬核验证。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
