简单的笔记好像没必要放上来...整理点可能需要弄混的东西吧。
注意：offset如果获取left或top值是相对于offsetParent的位置来取，offsetParent为当前对象的设置了定位属性（绝对定位、相对定位）的父标签。如果没有，那么就相对于body。
client-offset-page-screen理解.png
HTML代码：
<p>盒子的宽度为100，10个像素内边距，边框为300，相对定位顶部1200、左边1200</p>
<div id="box"></div>
CSS代码：
*{
margin: 0;
padding: 0;
border: none;
}
#box{
width: 100px;
height: 100px;
border: 30px solid #000;
padding:10px;
position: relative;
top: 1200px;
left: 1200px;
}
p{
position: fixed;
}
JS代码：
window.onload = function () {
var box = document.getElementById("box");
// client属性不包括边框
console.log("box的client属性");
console.log("box的clientWidth"+box.clientWidth);
console.log("box的clientHeight"+box.clientHeight);
console.log("box的clientLeft"+box.clientLeft);
console.log("box的clientTop"+box.clientTop);
console.log("");
console.log("box的offset属性");
console.log("box的offsetWidth"+box.offsetWidth);
console.log("box的offsetHeight"+box.offsetHeight);
console.log("box的offsetLeft"+box.offsetLeft);
console.log("box的offsetTop"+box.offsetTop);
console.log("");
box.onclick= function (event) {
event = event || window.event;
console.log("screenX:点击的点相对于显示器左边的距离为："+event.screenX);
console.log("screenY:点击的点相对于显示器顶部的距离为："+event.screenY);
console.log("pageX:点击的点相对于document左边的距离为："+event.pageX);
console.log("pageY:点击的点相对于document顶部的距离为："+event.pageY);
}
}
