对于clientWidth，clientHeight，clientTop，clientLeft，offsetTop，offsetLeft，offsetWidth，offsetHeight的理解

记录。

1.先设置两个div，并进行样式设置，测试div为子元素。
2.给父元素开启或不开启定位，查看子元素的offsetLeft，offsetTop值的变化。
3.父元素开启定位与否对于clientWidth，clientHeight，clientTop，clientLeft，offsetWidth，offsetHeight并无影响。

父元素不开启定位

1.样式设置如下

2.控制台输出如下：

父元素开启定位

1.样式设置如下

2.控制台输出如下

总结

client相关

• clientWidth = width + 左右padding；
• clientHeight = width + 上下padding；
• clientTop = 上边距（border-top）；
• clientLeft = 左边距（border-left）。

offset相关

• offsetWidth = width + 左右padding + 左右border；
• offseHeight = width + 上下padding + 上下border；
• 父元素不开启定位，offsetLeft、offsetTop相对于body进行计算；
• 父元素开启定位，offsetLeft、offsetTop相对父元素进行计算。