页面的一些测量数据

网页的一些测量数据

主要是理清scrollHeight、clientHeight、offsetHeight、scrollTop、offsetTop，先前一直混淆不清。

针对整个HTML页面

先只考虑整个页面的属性。
测试采用Chrome浏览器，测试用的代码如下：

html:  body{    height:2700px;  }  div{    height:2600px;    width:2400px;    background: tan;  }html:  <div>  </div>

显示效果

在chrome里面看html与body两个的属性测量。
body结果如下

html结果如下

• height
  使用方式是document.body.style.height。它是比较特殊的一个值，因为它属性对象的style对象的一个成员，它的值是一个String，而其它的值都是Int类型的。不过这种调用方式只能得到行内样式。要想得到真实的height属性，就要使用getComputedStyle(document.body).height了。IE是使用currentSytle，所以要做个选择操作。
  结论是：
• clientHeight
  内容可见区域的高度。document.body.clientHeight为2700px，而如果设置body的css为{padding:0,margin:0}的话，则会得到2716。原因是body的margin为8px。
• scrollHeight
  得到的`document.body.scrollHeight'为2716px。
• offsetHeight
  和clientHeight一样，`document.body.offsetHeight'得到2700px。
• scrollTop
  页面往下滚动了的距离。
• offsetTop
  对整个页面无效，始终是0。

针对一个具体的元素

然后就某一个设置了overflow:scroll的div元素来测试。

  css:    div#d{      width:160px;      height:160px;      border: solid black 30px;      padding:30px;      margin:30px;      overflow: scroll;    } html:  <div id='d'>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati asperiores, saepe rerum maiores id iste doloremque quia. Veniam praesentium odio excepturi ducimus quisquam vel cumque harum adipisci tempore, fuga, aut?</div>

显示的结果如下

然后在chrome下看3个height的值

而在FF下分别是196、280、324。
然后发现padding对三个height值全是有影响的（注释了padding三个值全减了60，但在FF下scrollHeight只减了30左右，变成293，很其怪，不过chrome根据我的测试chrome的结果始终是合理的），而margin全无效。
然后分别注释其他语句，最终的结论是：

• clientHeight属性表示页面可见区域的高度，就是截图中的白色部分！值等于元素的内容+padding。不包括border、margin和滚动条。周围那圈白色部分就是padding部分。
• offsetHight属性的值，等于元素内容+border+padding和滚动条。不包括margin。
• scrollHeight属性的值明显要大出许多。但其实它是最简单的值。它的值是元素的实际高度。

两个top的值也是挻好理解的。

• scrollTop
  分别拉动右侧滑动条，发现scorllTop会发生改变，一目了然。它可以获取对象的实际最高的地方距离显示范围的顶部间的距离，也就是下拉的距离。它返回值是一个整数，单位是像素。
• offsetTop
  其实offsetTop指的是当前元素上边缘距离offsetParent的距离，也就是我在代码中设置的margin值。offsetParent是当前元素最近的采用了非静止定位的祖先元素。如果不存在这样的祖先元素，那么offsetParent就是body。
  offsetParent是一个很重要的概念！！！要想明确各种浮动和定位等的关系就要准确的找出各个元素的非静止定位的祖先元素。
  顺便看看stackoverflow上的这个回答吧！
  然后盗了它两张图：
  

很气的就是，虽然看到许多文章都写了这些内容，但好多错的啊！！然后只能自己动手了。