引子
曾校招口试的时刻，进修了三个月前端的我去某厂口试，口试官循循善诱考核了一个开辟中的现实场景，其中有须要用到某元素的高度，口试官问我clientHeight和offsetHeight的区分是什么，我当时一脸懵逼，这个题目关于当时的我来讲已完整超纲了…口试效果自然是口试官谢谢我来列入口试…
英雄不提昔时囧，本日总结一下罕见的元素种种宽高。
一些height和width
clientHeight和clientWidth
没有横向转动条时：clientHeight = css设置的height + paddingTop + paddingBottom
有横向转动条时：clientHeight = css设置的height + paddingTop + paddingBottom – 转动条的高度
clientWidth相似，就不再赘述
ps：这个属性是只读属性，关于没有定义CSS或许内联规划盒子的元素为0
offsetHeight和offsetWidth
offsetHeight = ccss设置的height + paddingTop + paddingBottom + borderTop + borderBottom
offsetWidth相似，就不再赘述
scrollHeight和scrollWidth
无转动条时：scrollHeight = clientHeight = css设置的height + paddingTop + paddingBottom
有转动条时：scrollHeight = 现实内容的高度 + paddingTop + paddingBottom（即要算上由于转动被遮住的内容高度
scrollWidth不再赘述
一些Top和Left
clientLeft和clientTop
clientTop = borderTop
clientLeft = borderLeft
offsetLeft和offsetTop
以offsetTop为例，搞懂它首先要邃晓offsetParent是什么
offsetParent是元素近来的有定位的父元素，假如父元素中没有有定位的，那末就是近来的 table, table cell 或根元素。
offsetTop 和 offsetLeft 都是相关于offsetParent内边距边境的。
scrollTop和scrollLeft
scrollTop即为向上转动时，元素内容区被遮住的那一部份。
scrollLeft同理
