三大家族使用场景

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);