1. 盒子模型
介绍这三个属性之前先来了解一下CSS盒子模型。
盒子模型顾名思义就是盒子的意思，盒子里面可以装很多东西。
组成一个完整的盒子主要包括下面几个部分：
- width
- height
- padding
- border
- margin
- box-sizing（用来区别正常盒模型和怪异盒子模型）
盒子模型又分为了正常盒模型和怪异盒模型。
1.1 正常盒模型
通过上图可以看出：宽度就是内容的宽度。当我们修改padding或者border属性时，盒子的总宽度会改变。
1.2 怪异盒子模型
通过上图可以看出：盒子的宽度 = 内容宽度 + padding + border。
简单了解了CSS中的盒子模型后，我们再来了解这三个高度属性。
2. offsetHeight
简单总结为一句话：获取元素的高度，包含padding和border。
3. clientHeight
简单总结为一句话：获取元素的高度，包含padding。
这个属性和offsetHeight类似，唯一的区别就是它不包含border。
4. scrollHeight
简单总结为一句话：获取元素的高度，包含padding。
这个属性和clientHeight类似，都不包含border。
scrollHeight和clientHeight区别：scrollHeight的高度需要更具内容的实际尺寸决定。
总结
- offsetHeight = 内容高度 + padding + border
- clientheight = 内容高度 + padding
- scrollHeight = 内容实际尺寸 + padding
参考原文档: https://zhuanlan.zhihu.com/p/496799095
标签：盒子,模型,clientHeight,padding,offsetHeight,border,scrollHeight From： https://www.cnblogs.com/maodx/p/17384281.html