1.offset系列 offset元素的偏移量主要有offsetLeft,offsetTop,offsetWidth,offsetHeight四种模式 offsetTop: 盒子上边框距离页面顶部的距离 offsetLeft:盒子左边框距离页面左端的距离 offsetWidth:盒子的宽度（包括边框和内外边距） offsetHeight:盒子的高度（包括边框和内外边距） 如：
<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; margin: 50px; } </style> <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.offsetWidth); //300 console.log(box.offsetHeight); //300 console.log(son.offsetTop); //100 console.log(son.offsetLeft); //100 console.log(son.offsetWidth); //60 console.log(son.offsetHeight); //60 //offset以带有父级定位元素的盒子为主，当给父级盒子一个定位以后（position: relative;），相应的offsetTop和offsetLeft对应的值会发生改变，此时： console.log(son.offsetTop); //50 console.log(son.offsetLeft); //50 </script> </body>注意offset是以带有父级定位元素的盒子为主，还是刚才的例子：
//如果给父级盒子box一个定位则输出div，否则输出整个body console.log(son.offsetParent) //div注意offsetParent和parentNode的区别 offsetParent 指与位置有关的上级元素 只读 parentNode 指与位置无关的上级元素 只读
console.log(son.offsetParent) //div/body console.log(son.parentNode) //div2.client系列 client系列主要有clientLeft,clientTop,clientWidth,clientHeight四种模式 clientLeft: 获取的就是我们设置的边框值 clientTop:同上 clientWidth:获取的是盒子的宽加上我们设置的内边距（不含边框） clientHeight:获取的是盒子的高加上我们设置的内边距（不含边框） 如：
<style> #box { width: 200px; height: 200px; background-color: yellow; border: 10px solid #ccc; /* padding: 50px; */ margin: 100px; } </style> <body> <div id="box"></div> <script> var box = document.getElementById('box') console.log(box.clientTop); //10 console.log(box.clientLeft); //10 console.log(box.clientWidth); //200 console.log(box.clientHeight) //200 //当我们给盒子设置一个padding值为50px时 console.log(box.clientWidth); //300 console.log(box.clientHeight) //300 </script> </body>3.scroll系列 scroll也称滚动偏移，scroll系列主要有scrollLeft,scrollTop,scrollWidth,scrollHeight四种模式 scrollLeft:水平滚动条文字滚动的距离，一般不用，默认为0 scrollTop:竖直滚动条文字滚动的距离，默认为0 上述两种属性只有当设置相对应方向的滚动条并由鼠标拖动，console.log()才会输出相对应的文字移动距离 scrollWidth:获取的是整个内容的宽度，排除滚动条的宽度 scrollHeight:获取的是整个内容的高度,包括隐藏掉的内容 如：
<style> * { margin: 0; padding: 0; } #box { width: 100px; height: 100px; background-color: pink; padding: 10px; color: blueviolet; margin: 100px auto; border: 10px solid yellow; overflow: auto; } </style> <body> <div id="box">怎么忍心怪你犯了错，是我给你自由过了火，让你更寂寞，才会陷入感情漩涡 , 怎么忍心怪你犯了错，是我给你自由过了火，让你更寂寞，才会陷入感情漩涡 </div> <script> var box = document.getElementById('box') console.log(box.clientWidth) //103 console.log(box.clientHeight) //120 console.log(box.scrollHeight) //335 console.log(box.scrollWidth) //103 // console.log(box.scrollTop) //0 // console.log(box.scrollLeft) //0 box.onscroll = function() { console.log(box.scrollTop) } </script> </body>以上仅是博主学习后的个人总结以及理解，如有不足之处请博友们提出指正，非常感谢！
