offsetwidth,clientwidth，scrollWidth的区别

clientWidth是对象看到的宽度（不含边线,即border）
scrollWidth是对象实际内容的宽度（若无padding，那就是边框之间距离，如有padding，就是左padding和右padding之间距离）。
offsetWidth是指对象自身的宽度，整型，单位像素（含边线，如滚动条的占用的宽，值会随着内容的输入而不断改变）。

scrollHeight:   获取对象的滚动高度(纵向滚动条滚动了多少距离)

scrollWidth:    获取对象的滚动宽度

scrollLeft:     设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
scrollTop:      设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离

offsetHeight:   获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度

offsetWidth:    获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的宽度(包括border)，即对象本身宽度+border左右宽度

offsetLeft:     获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置,即相对于父元素的左位移
offsetTop:      获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置，即相对于父元素的上位移

clientHeight:   对象相对于网页可见区域的高度

clientWidth:    对象相对于网页可见区域的宽度

IE6.0、FF1.06+：
clientWidth = width + padding(padding-left + padding-right)
clientHeight = height + padding(padding-top + padding-bottom)
offsetWidth = width + padding + border
offsetHeight = height + padding + border

IE5.0/5.5：
clientWidth = width - border
clientHeight = height - border
offsetWidth = width
offsetHeight = height

(需要提一下：CSS中的margin属性，与clientWidth、offsetWidth、clientHeight、offsetHeight均无关，margin本意页边，是个定位的概念。margin已经和元素所占宽度没有任何关系了，只是让元素与周围元素产生距离。于是，可以有一个小总结：padding是一个元素所占大小的概念，margin是个定位的概念)

网页可见区域宽： document.body.clientWidth;(浏览器窗口可视区域不包括工具栏和滚动条)
网页可见区域高： document.body.clientHeight;

网页可见区域宽： document.body.offsetWidth (包括边线border的宽);
网页可见区域高： document.body.offsetHeight (包括边线border的宽);

网页正文全文宽： document.body.scrollWidth;
网页正文全文高： document.body.scrollHeight;

网页被卷去的高： document.body.scrollTop;
网页被卷去的左： document.body.scrollLeft;

网页正文部分上： window.screenTop;
网页正文部分左： window.screenLeft;

屏幕分辨率的高： window.screen.height;
屏幕分辨率的宽： window.screen.width;

屏幕可用工作区高度： window.screen.availHeight;
屏幕可用工作区宽度：window.screen.availWidth;

clientX 设置或获取鼠标指针位置相对于当前窗口（浏览器窗口可视区域）的 x 坐标，其中可视区域不包括窗口自身的控件和滚动条。 
clientY 设置或获取鼠标指针位置相对于当前窗口的 y 坐标，其中客户区域不包括窗口自身的控件和滚动条。 
offsetX 设置或获取鼠标指针位置相对于触发事件的对象(比如某个div区域)的 x 坐标。 
offsetY 设置或获取鼠标指针位置相对于触发事件的对象的 y 坐标。 
screenX 设置或获取获取鼠标指针位置相对于用户屏幕的 x 坐标。 
screenY 设置或获取鼠标指针位置相对于用户屏幕的 y 坐标。 
x 设置或获取鼠标指针位置相对于父文档的 x 像素坐标(亦即相对于当前窗口)。 
y 设置或获取鼠标指针位置相对于父文档的 y 像素坐标(亦即相对于当前窗口)。

HTML DOM left 属性

定义

left 属性设置定位元素左外边距(margin-left) 边界与其包含块左边界之间的偏移。

语法：

Object.style.left=auto|%|length

可能的值

值	描述
auto	默认。通过浏览器来计算左侧的位置。
%	设置元素的左边到最近一个具有定位设置父元素的左边缘的百分比位置。
length	使用 px、cm 等单位设置元素的左边到最近一个具有定位设置父元素的左边缘的位置。可使用负值。

图例

另外附张图：

本文转自：http://blog.csdn.net/piziliweiguang/article/details/7762770

http://blog.csdn.net/rudy24/article/details/50779794

http://blog.csdn.net/mafan121/article/details/46309467