1.clentWidth和clientHeight
①加入无padding、无滚动条显示占据位置
clientWidth=style.width
②假如有padding、无滚动
clientWidth=style.width+2*style.padding
③假如有padding、有滚动
clientWidth=style.width+2*style.padding-滚动条宽度
clientHeight同理
2.clientLeft和clientTop
这一对属性用来读取元素的border的宽度和高度
clientLeft = border-left的border-width
clientTop = border-top的border-width
3.offsetWidth和offsetHeight
这一对属性指的是元素的border+padding+content的宽度和高度
①假如无padding、无滚动、无border
offsetWidth=clientWithd=style.width
②假如有padding、无滚动、有border
offsetWidth=style.width+2*style.padding+2*style.border-width=clientWidth+border-width*2
③假如有padding、有滚动，且滚动是显示的，有border
offsetWidth=style.width+2*style.padding+2*style.border-width=clientWidth+滚动轴宽度+border-width*2
4.offsetLeft和offsetTop
依据offsetParent
①如果当前元素的父级元素没有进行CSS定位（position），offsetParent为body
②如果当前元素的父级元素有CSS定位（position），offsetParent取最近的那个父级元素
在IE8/9/10及Chrome中：
offsetLeft=(offsetParent的margin-left)+(offsetParent的border宽度)+（offsetParent的padding-left）+（当前元素的margin-left）
在FireFox中
offsetLeft=（offsetParent的margin-left）+（offsetParent的padding-left）+（当前元素的margin-left）
5.Event对象的五种坐标
①clientX和clientY 相对于浏览器（可视区左上角0,0，不包含浏览器头）的坐标
②screenX和screenY 相对于设备屏幕左上角（0,0）的坐标
③offsetX和offsetY 相对于事件源左上角（0,0）的坐标
④pageX和pageY 相对于整个网页左上角（0,0）的坐标，在无滚动轴的情况下与clientX、clientY相等，有滚动轴的情况下，pageY包含滚动区那些部分的高度
⑤X和Y 本来是IE属性，相对于用CSS动态定位的最内层包容元素
在IE浏览器中，事件源无定位的情况下X、Y等于clientX、clientY，有定位的情况下等于offsetX和offsetY
在chrome中，事件源有无定位，都等于clientX、clientY