1.offset：偏移量 offsetLeft：元素的左外边框至最近的被定位的父元素之间的像素距离。 offsetTop：元素的上外边框至最近的被定位的父元素之间的像素距离。 offsetWidth: 元素的宽，包含填充，边框，滚动条的宽度。 offsetHeight: 元素的高，包含填充，边框，滚动条的高度。
example:
<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { margin: 0; padding: 0; } #box { width: 300px; height: 300px; background-color: #ccc; margin: 50px; overflow: hidden; position: relative; } #son { width: 50px; height: 50px; background-color: #ff3040; border: 5px solid #666; padding: 10px; margin: 50px; } </style> </head> <body> <div id="box"> <div id="son"></div> </div> <script> var box = document.getElementById('box') var son = document.getElementById('son') //父盒子偏移量 console.log(box.offsetTop);//50 console.log(box.offsetLeft);//50 console.log(box.offsetHeight);//300 console.log(box.offsetWidth);//300 //子盒子偏移量 console.log(son.offsetTop);//50 console.log(son.offsetLeft);//50 console.log(son.offsetHeight);//80 console.log(son.offsetWidth);//80 </script> </body> </html>2.client clientLeft：元素左侧边框宽度。 clientTop：元素顶部边框宽度。 clientWidth， clientHeight：内容区域的宽高，padding＋content的宽高，不包括边框宽度值。
example:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> #box { width: 200px; height: 200px; background-color: yellow; border: 20px solid #ccc; padding: 10px; margin: 100px; } </style> </head> <body> <div id="box"></div> <script> var box = document.getElementById('box') console.log(box.clientTop);//20 console.log(box.clientLeft);//20 console.log(box.clientWidth);//220 console.log(box.clientHeight);//220 </script> </body> </html>3.scorll ： 滚动大小
scrollLeft：被隐藏在内容区域左侧的像素数。 scrollTop：被隐藏在内容区域上方的像素数。 scrollWidth，scorllHeight : 元素整个内容的宽高，包括隐藏掉的内容。
example:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { margin: 0; padding: 0; } #box { width: 100px; height: 100px; background-color: blueviolet; padding: 10px; color: #fff; margin: 100px; border: 10px solid #666; overflow: auto; } </style> </head> <body> <div id="box">为你付出那种伤心你永远不了解，我又何苦勉强自己爱上你的一切,你又狠狠逼退我的防备</div> <script> var box = document.getElementById('box') console.log(box.scrollLeft);//0 console.log(box.scrollTop);//0 console.log(box.scrollWidth);//103 console.log(box.scrollHeight);//188 </script> </body> </html>