offsetWidth, offsetHeight, offsetLeft, offsetTop,clientWidth, clientHeight,clientX,pageX,screenX

offsetWidth: 元素在水平方向上占用的空间大小。包括元素的宽度,内边距，(可见的)垂直滚动条的宽度，左右边框的宽度。

offsetHeight:元素在垂直方向上占用的空间大小，包括元素的高度，内边距，（可见的）水平滚动条的高度，上下边框的高度.

offsetLeft: 元素的左边框至包含元素的左内边框之间的像素距离

offsetTop: 元素的上边框至包含元素的上内边框之间的像素距离

offsetParent: 保存着包含元素的引用

注意：

1.当对象的offsetParent属性指向的是body时，offsetLeft和offsetTop指的是对象的边框（不包括边框）到页面边缘（即包含body的border的宽度，或高度）的距离。在FireFox中，会减去body的边框的宽度。

2.当对象的offsetParent属性指向的是最近的定位祖先元素时，offsetLeft和offsetTop指的是对象的边框（不包括边框）到最近的定位祖先元素的边框（不包括边框）的距离。在IE8中，会将最近的定位祖先元素的边框宽度和高度计算在内。

注意事项可由以下实例验证得：

<!DOCTYPE html>

<html>

	<head>

		<meta charset="utf-8"/>

		<title>测试offsetLeft, offsetTop</title>

		<style>

			* {

				margin:0;

				padding:0;

			}

			body {

				margin-left:30px;

				border:5px solid #000;

				background:yellow;

				height:350px;

			}

			.d {

				float:left;

				position:relative;

				margin:20px;

				padding:20px;

				width:200px;

				height:200px;

				border:20px solid #000;

				background:red;

				overflow:auto;

			}

			.con {

				float:left;

				width:400px;

				height:80px;

				margin-left:25px;

				border:10px solid blue;

				background:green;

			}

			.zi {

				float:left;

				margin-top:20px;

				width:200px;

				height:300px;

			}

		</style>

		<script>

			(function(){

				window.onload=function(){

					var d=document.getElementById("d");

					var con=document.getElementById("con");

					var bo=document.getElementById("bo");

					var zi=document.getElementById('zi');

					zi.innerHTML="d.offsetTop="+d.offsetTop+"<br/>"+

						"d.offsetLeft="+d.offsetLeft+"<br/>"+

						"con.offsetTop="+con.offsetTop+"<br/>"+

						"con.offsetLeft="+con.offsetLeft+"<br/>";

				}

			})();

		</script>

	</head>

	<body id="bo">

		<div class="d" id="d">

			<div class="con" id="con">

				<a href="http://cyg7561.blog.163.com/" title="">test</a>

			</div>

		</div>

		<div class="zi" id="zi">

		</div>

	</body>

</html>

clientWidth: 元素内容区宽度+左右内边距宽度( width + padding-left + padding-right )

clientHeight: 元素内容区高度+上下内边距高度（height +　padding-top + padding-bottom）

注意：在window环境下IE中滚动条的宽度，高度为17px，FF ,chrome是21px, 在mac mini环境下，chrome, ff中滚动条的宽度都为15px;

scrollHeight: 主要用于确定元素内容的实际大小，在没有滚动条的情况下，元素内容的总高度

scrollWidth: 主要用于确定元素内容的实际大小，表示在没有滚动条的情况下，元素内容的总宽度

<!DOCTYPE html>

<html>

	<head>

		<meta charset="utf-8"/>

		<title>鬼眼邪神的博客</title>

		<meta name="author" content="鬼眼邪神"/>

		<meta name="description" content="鬼眼邪神的博客，http://cyg7561.blog.163.com/"/>

		<style>

			* {

				margin:0;

				padding:0;

			}

			body {

				margin-left:30px;

				border:5px solid #000;

				background:yellow;

				height:350px;

			}

			.d {

				float:left;

				position:relative;

				margin:20px;

				padding:20px;

				width:200px;

				height:200px;

				border:20px solid #000;

				background:red;

				overflow:auto;

			}

			.con {

				float:left;

				width:400px;

				height:80px;

				margin-left:25px;

				border:1px solid blue;

				background:green;

			}

			.zi {

				float:left;

				margin-top:20px;

				width:200px;

				height:300px;

			}

		</style>

		<script>

			(function(){

				window.onload=function(){

				// 	var d=document.getElementById("d");

				// 	var con=document.getElementById("con");

				// 	var bo=document.getElementById("bo");

				 	var zi=document.getElementById('zi');

					zi.innerHTML=

						"d.clientWidth="+document.documentElement.clientWidth+"<br/>"+

						"d.clientHeight="+document.documentElement.clientHeight+"<br/>"+

						"d.scrollWidth="+document.documentElement.scrollWidth+"<br/>"+

						"d.scrollHeight="+document.documentElement.scrollHeight+"<br/>";

						;

				}

			})();

		</script>

	</head>

	<body id="bo">

		<div class="d" id="d">

			<div class="con" id="con">

				<a href="http://cyg7561.blog.163.com/" title="鬼眼邪神的博客">鬼眼邪神的博客</a>

			</div>

		</div>

		<div class="zi" id="zi">

		</div>

		<p style="border: 2px solid #ddd; width: 100px">测试</p>

	</body>

</html>

　　以上代码是我用来测试当不包含滚动条的页面中取得页面clientHeight,clientWidth,scrollWidth, scrollHeight时，在各个浏览器中值得差异，根据测试所得，

在IE8，9，11,FF上clientWidth,clientHeight和scrollWidth,scrollHeight是相同的，大小都是代表文档内容区域的大小，而非适口的尺寸

但是在chrome中 scrollWidth,scrollHeight是等于视口大小，clientWidth,clientHeight等于文档内容区域的大小

而这一结论是和《高级程序设计》P324上的结论是相悖的，所以还是值得以后继续探究...

所以在跨浏览器的环境下面得到文档内容区域的大小，是必须要取得scrollWidth/clientWidth和scrollHeight/clientHeight中的最大值，即：

var docHeight = Math.max( document.documentElement.scrollHeight, document.documentElement.clientHeight);

var docWidht = Math.max( document.documentElement.scrollWidth, document.documentElement.clientWidth);

scrollTop: 被隐藏在内容区域上方的像素数，通过设置这个属性可以改变元素的滚动位置

scrollLeft: 被隐藏在内容区域左侧的像素数，通过设置这个属性可以改变元素的滚动位置

确定元素大小

getBoundingClientRect(): 返回包含4个属性：left, top, right, bottom的矩形对象。这些属性表示元素在页面中相对于视口的位置

/*

 * 跨浏览器兼容getBoundingClientRect()方法

 * ie8人为文档的左上角坐标是（2，2），其他浏览器包括IE9则将传统的（0，0）作为起点坐标

 * 因此需要一开始检测下位于（0，0）出得元素位置

 * 此方法用到arguments.callee，所以这个方法不能在严格模式下使用

 */

function getBoundingClientRect( elem ){

	// 这个函数使用自身它自身的属性来确定是否要的坐标进行调整

	if( typeof arguments.callee.offset != "number" ){

		var scrollTop = document.documentElement.scrollTop;

		var temp = document.createElement("div");

		temp.style.cssText = "position: absolute; left: 0; top: 0";

		document.body.append( temp );

		// 之所以要减去视口的scrollTop,是为了防止调用这个函数时窗口被滚动

		arguments.callee.offset = -temp.getBoundingClientRect().top -scrollTop;

		document.body.removeChild( temp );

		temp = null;

	}

	var rect = element.getBoundingClientRect();

	var offset = arguments.callee.offset;

	return{

		left: rect.left + offset,

		right: rect.right + offset,

		top: rect.top + offset,

		bottom: rect.bottom + offset

	}

}

　　这个方法兼容IE, Firefox 3+, Safari 4+, Opera 9.5及Chrome;

Event对象定位相关的属性：

客户区坐标位置

event.clientX: 表示事件发生时鼠标指针在视口中的水平坐标，这个值不包括页面滚动的距离

event.clientY: 表示时间发生时鼠标指针在视口中的垂直坐标，这个值不包括页面滚动的距离

所有浏览器都支持这两个属性。

页面坐标位置：

event.pageX: 表示鼠标光标在页面中的位置，因此坐标是从页面本身而非视口的左边计算的

event.pageY: 表示鼠标光标在页面中的位置，因此坐标是从页面本身而非视口的顶端计算的

IE8及更早版本不支持事件对象上的页面坐标，不过使用客户区坐标和滚动信息可以计算出来。

var div = document.getElementById("mydiv");

addHandler( div, "click", function( event ){

	event = event || window.event;

	var pageX = event.pageX;

	var pageY = event.pageY;

	if( pageX === undefined ){

		// document.body(混杂模式)||document.documentElement(标准模式)

		pageX = event.clientX + (document.body.scrollLeft || document.documentElement.scrollLeft);

	};

	if( pageY === undefined ){

		// document.body(混杂模式)||document.documentElement(标准模式)

		pageY = event.clientY + (document.body.scrollTop || document.documentElement.scrollTop);

	};

});

　　屏幕坐标位置：

event.screenX:　表示鼠标事件发生时，鼠标指针相对于整个电脑屏幕的横坐标的信息

event.screenY: 表示鼠标事件发生时，鼠标指针相对于整个电脑屏幕的横坐标的信息