offset
//border + padding + 内容宽高
console.log(box.offsetWidth , box.offsetHeight);
//当前元素距离有定位的父盒子左边的距离
//当前元素距离有定位的父盒子顶部的距离
console.log(box.offsetLeft , box.offsetTop);
client
//padding + 内容宽高
console.log(box.clientWidth , box.clientHeight);
//左边边框的宽度
//上边边框的宽度
console.log(box.clientLeft , box.clientTop);
scroll
//里面滚动内容的宽高
console.log(box.scrollWidth , box.clientHeight);
//左边的滚动距离
//上边的滚动距离
console.log(box.scrollLeft , box.scrollTop);