演示HTML元素页面定位的几种属性

演示 client/offset 相关的几种属性

clientHeight 和 clientWidth: 用于描述元素内尺寸，是指元素内容+padding 大小
不包括 border（IE下实际包括、margin 和滚动条部分
offsetHeight 和 offsetWidth: 用于描述元素外尺寸，是指元素内容+padding+border
不包括 margin 和滚动条部分
clientTop 和 clientLeft: 该元素 border 内外边缘的垂直和水平距离, 即 border-top-width 和 border-left-width
offsetTop 和 offsetLeft: 该元素的左上角(border 外边缘) 与已定位的父容器(offsetParent 对象)左上角(padding 外边缘)的距离
offsetParent: 指该元素最近的定位 (relative 、 absolute ) 祖先元素，递归上溯，如果没有祖先元素是定位的话，会返回 null

审查上面 demo 可以得到:

clientHeight 就是 #client-offset 的 height(200px)+上下padding(10px*2)
clientWidth 同理, 是 #client-offset 的 width(200px)+左右padding(10px*2)
clientLeft和ClientTop 即为 #client-height 的 border-left-width (3px) 和 border-top-width (3px)
offsetHeight 是 clientHeight(220px)+上下border(3px*2)
offsetWidth 同理, 是 clientWidth(220px)+左右border(3px*2)
offsetTop 是 #client-offset.margin-top(30px) + offsetParent.padding-top(8px)
offsetLeft 同理 #client-offset.margin-top(30px) + offsetParent.padding-top(8px)

演示 scroll 相关的几种属性

scrollWidth和scrollHeigh : 是指元素的内容区域 + padding + 溢出尺寸
当内容正好和内容区域匹配, 这时候没有溢出，这些属性与 clientWidth和clientHeight 相等
scrollLeft 和 scrollTop: 是指元素滚动条当前所在位置, 是可写的
通过给这两个属性赋值, 从而使页面滚动到指定位置

在 FireFox 和 IE10 下得到结果 scrollHeight: 494px ，而在 Chrome 和 Safari 下得到结果 scrollHeight: 502px ，差了 8px，这是因为 FireFox 和 IE10 没有计算 padding-bottom, 可以按照下面步骤计算来验证:

scrollHeight 肯定包含 #scroll-child 的 height(400px) + 上下padding(10px*2) + 上下border(3px*2) + 上下margin(30px*2) , 总计为 486px
494 = 486+8 , 592=486+8*2 , 494 看起来好像是计算了一个 padding
分别在不同浏览器中审查元素, 发现确实在 FireFox 和 IE10 没有计算 padding-bottom