offsetWidth / offsetHeight等

1. offsetWidth / offsetHeight（不包括外边距）

offsetWidth：返回元素的宽度（content+padding+border）
offsetHeight：返回元素的高度（content+padding+border）

2. offsetTop / offsetLeft（相对于父级的偏移量）

类似于子绝父相定位中的top和left，都是相对于有定位父级的偏移距离。
offsetTop：返回元素上边框到有定位父级元素的上边框的距离。（如果找不到有定位的父级，那么距离就是它的上边框到body的距离。）
offsetLeft：返回元素左边框到有定位父级元素的左边框的距离。（如果找不到有定位的父级，那么距离就是它的左边框到body的距离。）

下图演示的的是没有定位父级的情况：（如果外层盒子给一个定位，那么这里的offsetTop/offsetLeft都是0px）

3. clientWidth / clientHeight（不包括边框和外边距）

client客户端大小：当前元素内容和内边距占据空间的大小，不包括边框。
clientWidth：返回元素的宽度（content+padding）
clientHeight：返回元素的高度（content+padding）

4.getBoundingClientRect()分析

getBoundingClientRect()获取元素位置，这个方法没有参数

getBoundingClientRect()用于获得页面中某个元素的左，上，右和下分别相对浏览器视窗的位置。
getBoundingClientRect()是DOM元素到浏览器可视范围的距离（不包含文档卷起的部分）。