这里参考了一篇博客的理解：
clientWidth: 元素width+其左右padding的长度，（这里不包括边框的宽度）
clientHight： 元素height+其上下padding的长度，（这里不包括边框的高度）
clientTop: border.top(上边框的宽度）
clientLeft: border.left(左边框的宽度）
这里博主画了张图供理解，因为边框画笔为5像素，请忽略边框的宽度：
这里请忽略边框
offsetWidth: 元素width+左右padding+左右border
offsetHeight: 元素height+上下padding+上下border
这里请重视边框
offsetTop: 当前DOM元素上边框外部到邻近父级上边框内部的距离
offsetLeft : 当前DOM元素左边框外部到邻近父级左边框内部的距离
图示：
就是方环中间的部分
希望能对理解有帮助！
