在js中，会用到各种宽度高度的计算，有时傻傻分不清楚，先记录一下常用的宽高值。 假设我们有一个div:
<body>
<div class="oneDiv">这是一个div></div>
</body>
然后div设置一些样式：
.oneDiv {
width: 200px;
height: 200px;
padding: 10px;
background-color: red;
border: 5px solid black;
margin: 20px;
下面计算各种宽高：
- clientWidth和clientHeigh、clientTop和clientLeft
clientWidth = width + 左右padding
clientHeight = height + 上下padding
clientTop = 上边框的宽度
clientLeft = 左边框的宽度 - offsetWidth和offsetHight、offsetTop和offsetLeft
offsetWidth = width + 左右padding + 左右border
offsetHeight = height + 上下padding + 上下border
offsetTop: 当前元素上边框外边缘到最近的已定位的父级上边框内边缘的距离。如果父级都没有定位，则是到body的上边框内边缘距离
offsetLeft: 当前元素左边框外边缘到最近的已定位的父级左边框内边缘的距离。如果父级都没有定位，则是到body的左边框内边缘距离 - scrollWidth和scrollHeight、scrollTop和scrollLeft
scrollWidth：返回元素的整体宽度，包括可视区域宽度+被隐藏区域宽度
scrollHeight: 返回元素的整体高度，包括可视区域高度+被隐藏区域高度
scrollLeft: 返回元素左边缘与视图之间的距离，这里的视图指的是元素的内容（包括子元素以及内容）
scrollTop: 返回元素上边缘与视图之间的距离
最后，附上一张经典图:
