clientWidth和clientHeigth、clientTop和clientLeft
| 名字 |
公式 |
| clientWidth |
content的width + 左右padding(不包括border、滚动条、margin) |
| clientHeigh |
content的height + 上下padding (不包括border、平滚动条、margin) |
| clientTop |
boder.top(上边框的宽度) |
| clientLeft |
boder.left(左边框的宽度) |
offsetWidth和offsetHight、offsetTop和offsetLeft
| 名字 |
公式 |
| offsetWidth |
content的width + 左右padding + 左右boder + 滚动条（不包括margin） |
| offsetHeigth |
content的height + 上下padding + 上下boder + 滚动条 （不包括margin） |
| offsetTop |
当前元素上边框外边缘到最近的已定位父级（offsetParent）上边框 内边缘的距离。如果父级都没有定位，则是到body顶部的距离 |
| offsetLeft |
当前元素左边框外边缘到最近的已定位父级（offsetParent）左边框 内边缘的距离。如果父级都没有定位，则是到body左边的距离 |
scrollWidth和scrollHeight、scrollTop和scrollLeft
| 名字 |
公式 |
| scrollWidth |
获取指定标签内容层的真实宽度（可视区域宽度+被隐藏区域宽度） |
| scrollHeight |
获取指定标签内容层的真实高度（可视区域高度+被隐藏区域高度） |
| scrollTop |
内容层顶部到可视区域顶部的距离(滚动的高度) |
| offsetLeft |
内容层左端到可视区域左端的距离(滚动的高度) |
参考文章
MDN Element.clientWidth
MDN Element.clientHeight
MDN HTMLElement.offsetWidth
MDN HTMLElement.offsetHeight
JS中的位置和宽度：clientWidth、offsetWidth、scrollWidth等区别
搞清clientHeight、offsetHeight、scrollHeight、offsetTop、scrollTop
