1.盒子模型
介绍这三个属性之前先来了解一下CSS盒子模型，因为面试中如果遇到这道题，面试官通常也是想要考察你盒子模型的相关知识。
盒子模型顾名思义就是盒子的意思，盒子里面可以装很多东西。比如我们的div就可以比作一个盒子，那么组成一个完整的盒子主要包括下面几个部分：
- width
- height
- padding
- border
- margin
- box-sizing（用来区别正常盒模型和怪异盒子模型）
一个盒子大概由上面一些属性组成，盒子模型又分为了正常和模型和怪异和模型。
1.1 正常盒模型
我们借用一张图就可以很清楚的知道什么是正常盒模型：
通过上图可以看出：宽度就是内容的宽度。当我们修改padding或者border属性时，盒子的总宽度会改变。
1.2 怪异盒子模型
同样，我们借助一张图来理解怪异盒子模型：
结果解释：
最终offsetHeight = 150px，我们说过offsetHeight是获取元素的高度，上面代码中我们元素的高度设置为100px，但是offsetHeight却是150px，这就是因为正常盒子模型的宽度等于内容宽度的原因，实际上box1占据的宽度要更宽。
实际上offsetHeight = 100 + 20(padding) + 20(padding) + 5(border) + 5(border)。
在实际项目中，为了获得更准确，或者最真实的元素宽度，我们需要把正常盒子模型转为怪异盒子模型，添加属性box-sizing:border-box.。
代码如下：
<style> .box1 { width: 100px; height: 100px; padding: 20px; margin: 30px; border: 5px solid yellow; box-sizing: border-box; background-color: #ccc; } </style>
输出结果：
总结：offsetHeight = content+ padding + border
3.clientHeight
简单总结为一句话：获取元素的高度，包含padding。
这个属性和offsetHeight类似，唯一的区别就是它不包含border，具体来看代码演示。
代码如下：
<style> .box2 { width: 100px; height: 100px; padding: 20px; margin: 30px; border: 5px solid yellow; box-sizing: border-box; background-color: #ccc; } </style> <body> <div class="box1">盒子1</div> <div class="box2">盒子2</div> </body> <script> const box1 = document.getElementsByClassName("box1")[0]; const box2 = document.getElementsByClassName("box2")[0]; console.info("盒子1的offsetHeight",box1.offsetHeight); console.info("盒子2的clientHeight",box2.clientHeight); </script>
输出结果：
4.scrollHeight
简单总结为一句话：获取元素的高度，包含padding。
这个属性和clientHeight类似，都不包含border，那么具体有什么不一样呢，我们看代码演示。
代码如下：
<style> .box3 { width: 100px; height: 100px; padding: 20px; margin: 30px; border: 5px solid yellow; box-sizing: border-box; background-color: #ccc; } </style> <body> <div class="box1">盒子1</div> <div class="box2">盒子2</div> <div class="box3">盒子3</div> </body> <script> const box1 = document.getElementsByClassName("box1")[0]; const box2 = document.getElementsByClassName("box2")[0]; const box3 = document.getElementsByClassName("box3")[0]; console.info("盒子1的offsetHeight", box1.offsetHeight); console.info("盒子2的clientHeight", box2.clientHeight); console.info("盒子3的scrollHeight", box3.scrollHeight); </script>
输出结果：
可以看到scrollHeight和clientHeight输出结果一样，那么它们之间有什么区别呢？
其实它们的区别就一个：scrollHeight的高度需要更具内容的实际尺寸决定，比如我们修改一下我们的代码。
代码如下：
.box3 { width: 100px; height: 100px; padding: 20px; margin: 30px; border: 5px solid yellow; box-sizing: border-box; background-color: #ccc; overflow: auto; } <div class="box3"> <div style="height: 300px;">盒子3</div> </div>
输出结果：
上段代码中我们在box3中添加了一个div，并且设置高度300px，此时的scrollHeight输出340px，也就代表我们的scrollHeight是需要根据实际的内容尺寸计算的。
总结：scrollHeight = 实际内容尺寸+ padding
总结
这三个属性虽然都很类似，但是每一个又有一些不一样的地方，总结起来就下面三点：
- offsetHeight = 内容高度 + padding + border
- clientheight = 内容高度 + padding
- scrollHeight = 内容实际尺寸 + padding
