前段时间写一个自动滚动+鼠标放上去可供滚动的页面功能，被元素的几个属性搞的有点晕乎晕乎的，下决心来搞明白是什么意思，先上示例代码：
<style>.father{width: 500px;height: 400px;border: 50px solid blue;border-color: red; background: blue;overflow: scroll;}.son{height: 800px;background: green;border: 20px solid #fff;padding: 100px;margin: 20px;}
</style><div class="father" id="father"><div class="son" id="son"><p>这是子节点</p><p>这是子节点</p><p>这是子节点</p><p>这是子节点</p><p>这是子节点</p><p>这是子节点</p><p>这是子节点</p><p>这是子节点</p></div>
</div>元素的 clientHeight = 元素的height + 元素的padding - 横向滚动条高度（如果有设置 overflow：scroll的话,谷歌浏览器是：6.8px ≈ 7px）
clientHeight(father) = height（father）:400px + paddingTop(father):0px + paddingBottom(father):0px - 横向滚动条高度（father）：7px = 383pxclientHeight（son） = height（son）: 800px + paddingTop(son):100px + paddingBottom(son):100px - 横向滚动条高度（son）：0px = 1000px总结：元素的 clientHeight只包括了元素height 和padding,不包括margin 和 border
当内部元素高度大于父元素高度时：
元素的 scrollHeight = 内部元素的clientHeight + 内部元素的margin+ 内部元素的border+ 元素自身的padding
当内部元素高度小于父元素高度时：
元素的 scrollHeight = 元素的 clientHeight
当子元素高度超过父元素高度时：
scrollHeight (father) = clientHeight（son）:1000px + borderTop(son):20px+ borderBottom(son):20px + marginTop(son):20px + marginBottom(son):20px = 1080x当子元素高度小于父元素高度时：
scrollHeight (father) = clientHeight (father)scrollHeight （son） = clientHeight（son） = 1000px 总结：元素的 scrollHeight 包括了内部元素的盒子高度(height + padding + margin + border)和自身的padding
元素的 offsetHeight = 元素的height + 元素的border+ 元素的 padding
offsetHeight (father) = height（father）:400px + paddingTop(father):0px + paddingBottom(father):0px + borderTop(father):50px+ borderBottom(father):50px = 500pxoffsetHeight （son） = height（son）: 800px + paddingTop(son):100px + paddingBottom(son):100px + borderTop(son):20px+ borderBottom(son):20px = 1040px总结：元素的 offsetHeight 只包括了元素height 、padding和border ,但不包括 margin
