高度相关

给一个元素分配大小（height和width）之后,属性box-sizing不同的值会影响元素的真正大小。

祈祷王杰|王韵禅

让我们敲希望的钟啊多少祈祷在心中让大家看不到失败叫成功永远在让地球忘记了转动啊四季少了夏秋冬让宇宙关不了天窗叫太阳不西冲让欢喜代替了哀愁啊微笑不会再害羞让时光懂得去倒流叫青春不开溜让贫穷开始去逃亡啊快乐健康留四方让世界找不到黑暗幸福像花开放让我们敲希望的钟啊多少祈祷在心中让大家看不到失败叫成功永远在让大家看不到失败叫成功永远在

祈祷王杰|王韵禅

左侧元素的实际高度 = 235(你设置的高度：内容和横向滚动条共享) + 50*2(上下内边距) + 30*2(上下边框) = 395

右侧元素的实际高度 = 235(你设置的高度) = 75(包括横向滚动条) + 50*2(上下内边距) + 30*2(上下边框)

clientHeight 是元素内部的高度(单位像素)，包含内边距，但不包括水平滚动条、边框和外边距。
clientHeight 可以通过 CSS height + CSS padding - 水平滚动条高度 (如果存在)来计算。

注：clientHeight = 实际内容可视区域的高度 + 上下内边距（注意：border-box时，盒子模型中的元素的高度包括横向滚动条）

offsetHeight 返回该元素的像素高度，高度包含该元素的垂直内边距和边框，且是一个整数。
offsetHeight 包括元素的边框、内边距和元素的水平滚动条（如果存在且渲染的话），不包含:before或:after等伪类元素的高度。

注：offsetHeight、DOMRect.height和上文说的“实际高度”是一样的。

scrollHeight 的值等于该元素在不使用滚动条的情况下为了适应视口中所用内容所需的最小高度。没有垂直滚动条的情况下，scrollHeight值与元素视图填充所有内容所需要的最小值clientHeight相同。包括元素的padding，但不包括元素的border和margin。scrollHeight也包括 ::before 和 ::after这样的伪元素。