一些属性和方法，在dom中没有规定如何确定页面中元素大小的情况下诞生。。。

1.偏移量（offset dimension）

 测试代码：

 

1  2  3      4         
      5          6         
      7         20     21     22         
     
      23             
      
24         
     
25     26 

 

js代码：

1 

 

获取理论结果：

//offsetWidth  包括padding和border，不包括滚动条，滚动条是默认在宽度中的。

几种情况——

//加了boxsizing的情况：  offsetWidth值  =  style的宽度值,

//不加boxsizing的情况 :   offsetWidth值  =  style中的宽度  +  padding左右值  +  border左右值。

//有无滚动条不受影响

//height同理

以上理论，经测在谷歌和火狐中都适用。

offsetLeft 和 offsetTop

offsetLeft/offsetHeight是元素的左边框/上边框到其最近的、具有大小的元素左边框/上边框的距离。

具体值还是取决于他的offsetParent。

心中有个概念，但是最终解释还是看不同情况下的结果：

 2.客户区大小（client dimension）

指的是元素内容及其内边距所占据的空间大小，从字面上看，客户区大小就是元素内部的空间大小，因此滚动条占用的空间不计算在内【js高级程序设计文摘】

测试offsetWidth顺便测试的clientWidth的

 

clientWidth  永远会减去滚动条的尺寸和border的尺寸，只包括内容和padding的。!! 即使加了box-sizing=border-box也不包括border，

 

几种情况——

//加了box-sizing:   clientWidth值就是  =  style中的宽度 - border宽度，

//不加box-sizing:   clientWidth值就是  =  style中的宽度 + padding左右值。

//有滚动条情况：clientWidth值  =  （style中的宽度 + padding左右值）- 17px（滚动条的宽度值）；

//滚动条加box-sizing情况:  clientWidth值  =  style中的宽度 - 17px（滚动条的宽度值）- border的左右宽度值

 

//height同理

 

以上理论，经测在谷歌和火狐中都适用。

3.scrollHeight（client dimension）

 scrollHeight返回元素的完整的高度,以像素为单位