【前端工程师手册】前端应该知道的各种宽高
引子
曾经校招面试的时候，学习了三个月前端的我去某厂面试，面试官循循善诱考察了一个开发中的实际场景，其中有需要用到某元素的高度，面试官问我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同理