偏移量的概念

* {
	padding: 0;
	margin: 0;
}

#box {
	width: 100px;
	height: 100px;
	margin: 10px;
	padding: 10px;
	border: 5px solid red;
}

<div id="box"></div>

offset系列

var box = document.getElementById('box');
//box的父级元素是body，所以获取的是body的标签
console.log(box.offsetParent);
//获取的是与浏览器左边缘的距离，结果是10
console.log(box.offsetLeft);
//获取的是与浏览器上边缘的距离，结果是10
console.log(box.offsetTop);
//获取的是自身的宽，包括自己的padding，border，结果是130
console.log(box.offsetWidth);
//同理，结果是130
console.log(box.offsetHeight);

client系列

	//获取的是与自身边框的距离，就是可以看见内容的距离
	//这两个结果都是5，因为设置了边框，所以到自身边框距离是5
    console.log(box.clientTop)
    console.log(box.clientLeft);
    //获取自身的宽高（包括padding，不包括border）
    //宽高都是100，加上有内边距，所以是120
    console.log(box.clientWidth);
    console.log(box.clientHeight);

scroll系列

//往左滑动的时候，里面的内容隐藏了多少距离就是scrollLeft的距离
console.log(box.scrollLeft)
//往上滑动的时候，里面的内容隐藏了多少距离就是scrollLeft的距离
console.log(box.scrollTop)
//隐藏内容的宽
console.log(box.scrollWidth)
//隐藏内容的高
console.log(box.scrollHeight)