屏幕可视区域的width与height
width = document.documentElement.clientWidth;
height = document.documentElement.clientHeight;
屏幕总高度
height= document.documentElement.scrollHeight;

当前元素名称为oCurrent；
当前元素的父元素名称为oParent；
当前元素的的其它兄弟元素oBrother;
的用 .号代替
padding-left pl 代替
padding-right pr 代替
padding-top pt 代替
padding-bottom pb 代替
margin-left ml 代替
margin-right mr 代替
margin-top mt 代替
margin-bottom mb 代替
文章中实测数据与文章示例所使用的当前版本浏览器为准。

      <style type="text/css">
        body {
            height: 2000px;
            margin: 10px;
            padding: 100px;
            border: 30px solid #999;
            background: #ddd;
        }
        #current {
            width: 400px;
            height: 200px;
            margin: 10px;
            padding: 20px;
            border: 30px solid lemonchiffon;
            background: lightcoral;
        }
        #parent {
            width: 800px;
            height: 300px;
            margin: 10px;
            padding: 50px;
            background: lightsteelblue;
            border: 30px solid lightseagreen;
        }
    </style>
    <div id="parent">
        <div id="current"></div>
    </div>

offset系列

1. offsetLeft、offsetTop

• ie6 ~ ie7
  一. oCurrent = 无定位 ，oParent = 无定位 ||position: relative、 absolute;
  二. oCurrent = position: relative; ，oParent = position: relative、 absolute;

     oCurrent.offsetLeft = oParent.pl + oBrother.offsetWidth + oCurrent.ml;
     60 = 50 + 0 + 10;
     oCurrent.offsetTop = oParent.pt + oBrother.offsetHeight ;
     50 = 50 + 0 ;
     注意：在计算 oCurrent.offsetTop 时，oCurrent.mt 是失效的.
  

三. oCurrent = position: absolute ，oParent = position: relative、absolute;

    oCurrent.offsetLeft = oParent.pl + oBrother.offsetWidth + oCurrent.ml;
     60 = 50 + 0 + 10;
     oCurrent.offsetTop = oParent.pt + oBrother.offsetHeight + oCurrent.mt;
     60 = 50 + 0+ 10 ;
     注意：oCurrent.mt 生效的.

四. oCurrent = position: relative、absolute ，oParent = 无定位；

    oCurrent.offsetLeft = body.ml + body.bl + body.pl + oParent.ml +  oParent.bl + oParent.pl + oBrother.ml + oBrother.offsetWidth +oBrother.mr + oCurrent.ml ;
     240 = 10 + 30 + 100 + 10 +  30 + 50 +0 + 0 + 0 + 10;
     oCurrent.offsetTop = body.mt + body.bt + body.pt  +  oParent.bt + oParent.pt  + oBrother.offsetHeight + oCurrent.mt ;
   220 = 10 + 30 + 100 +  30 + 50 + 0 ;
     注意：oParent.mt 、oBrother.mt 无效的 .
           ie7 当 oBrother 出现 则 oCurrent.mt 有效
           ie6 当 oBrother 出现 则 oBrother.mb 有效

---

各浏览器一致
clientWidth-可视区宽
**(padding-left)+(width)+(padding-right)-滚动条宽度(17px) **
clientHeight-可视区高
(padding-top)+(height)+(padding-bottom)-滚动条宽度(17px)
在没有内边距和滚动条，没有设置css宽高；
那么ie6，ie7 浏览器会理解为clientWidth：0，clientHeight：0；
ie8+ clientWidth：宽度，clientHeight：0；

offsetWidth-占位宽
*(border-width)2+clientWidth(滚动条宽度默认算在内) **
offsetHeight-占位高
*(border-width)2+clientHeight(滚动条宽度默认算在内) **

参考

http://caibaojian.com/js-name.html
http://blog.csdn.net/inuyasha1121/article/details/49149725