这几个坐标值都是什么意思啊？

Question

在写程序过程中发现关于坐标值的多种写法，
主要有以下几种：
left/top/width/height.最为常见。
offsetleft/scrollLeft/pixelLeft.
offsettop/scrollTop/pixelTop.
offsetwidth/scrollWidth/pixelWidth.
offsetheight/scrollHeight/pixelHeight.
上面的几种写法把头都弄大了。
现在晕得很，到底都是什么意思啊？
我知道有几种是IE的专有属性，但是不太清楚
具体什么意思？
希望高人指点一下。
最好能给个小例子来说明一下。
O(∩_∩)O谢谢了！！！

Answer 1

left/top是距左、上的位置
width/height是本身宽度、高度

Answer 2

left/top/width/height.最为常见。         //X / Y / 宽 / 高
offsetleft/scrollLeft/pixelLeft.       //对象到左边框（含）的距离 / 被卷去的左边距离 / ？
offsettop/scrollTop/pixelTop.          //对象到顶边框（含）的距离 / 顶部被卷去的部分 / ？
offsetwidth/scrollWidth/pixelWidth.    //包含边框的宽度 / 对象原本的宽度 / ？
offsetheight/scrollHeight/pixelHeight. //包含边框的高度 / 对象原本的高度 / ？

Answer 3

left/top/width/height.
通常为控件属性,要设置过才能拿到的.offset
这类和浏览器的左上角有关,是相对位移.只要控件在就能拿到.scroll
这类顾名思义是右边的滚动条.通常用来做浮动层.但是我发现有些!DOCTYPE能把他废掉.原因不明.pixel 
这个其实就是element.style.xxxx的像素形式.

Answer 4

我offset的说明有点错误...详细查看这里吧
http://blog.csdn.net/natineprince/archive/2009/04/30/4138260.aspx