一 scroll系列属性 ——滚动
1 scrollHeight/scrollWidth 标签内部实际内容的高度/宽度
ele.scrollHeight 有两种情况，
当内容超出盒子范围后，返回的是内容的高度，包括padding，从顶部内侧到内容的最外部分。
当内容不超出盒子范围时，返回的是盒子的高度，就是 ele.scrollHeight == ele.clientHeight,最小值就是ele.clientHeight
ele.scrollWidth 情况同 ele.scrollHeight一样。
当内容超出盒子范围后，返回的是内容的宽度，包括padding，从左边内侧到内容的最外部分。
当内容不超出盒子范围时，返回的是盒子的宽度，就是 ele.scrollWidth == ele.clientWidth,最小值就是ele.clientHeight
各个浏览器说法不一：
IE、Opera 认为 scrollHeight 是网页内容实际高度，可以小于 clientHeight。
NS、FF 认为 scrollHeight 是网页内容高度，不过最小值是 clientHeight。
2 scrollTop／scrollLeft
ele.scrollTop 滚动时返回的是被卷去部分的顶部到可视区域的顶部，看图
ele.scrollLeft 滚动时返回的是被卷去部分的左侧到可视区域的左侧，看图
函数封装 ----获取卷曲的宽度和高度
function myScroll() {return {top: window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0,left: window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0 }
}eg：document.documentElement-----html标签
document.body ------body内部
ps！ 想要实时获取页面卷曲的高度或宽度，必须在事件内进行
window.onscroll = function(){}
3 scrollTo
window.scrollTo(1500,2000);//参数1 表示横向滚动到的位置 //参数2 表示纵向滚动到的位置
二 client系列属性 ——可视
1. clientWidth／clientHeight
ele.clientWidth 返回元素内部空间的宽度（width+padding）,是一个只读属性。不包含border和margin以及纵向滚动条。
(ele.clientWidth = width + padding - 滚动条的高度)
ele.clientHeight 返回元素内部空间的高度（height+padding）,是一个只读属性。不包含border和margin以及横向滚动条。
(Ele.clientHeight = height + padding - 滚动条的宽度)
@ 和offsetWidth／offsetHeight 的区别：
offsetWidth包含border，而clientWidth不包含border。
scrollHeight的最小值和clientHeight相同
2 clientTop／clientLeft
ele.clientTop 表示一个元素的左边框的宽度，以像素表示。是一个只读属性
如果元素的文本方向是从右向左（RTL, right-to-left），并且由于内容溢出导致左边出现了一个垂直滚动条，则该属性包括滚动条的宽度（默认17px）。
clientLeft 不包括左外边距和左内边距
（ele.clientLeft = border-left-width + 滚动条的宽度）
ele.clientLeft 一个元素顶部边框的宽度（以像素表示）。不包括顶部外边距或内边距。
（ele.clientTop = border-top-width）
函数封装：
function myClient() {return {width: window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth || 0,height: window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight || 0} }
三 offset系列的属性
1. offsetWidth／offsetHeight
ele.offsetWidth 它返回该元素的像素宽度，（box-sizing:content-box）默认情况下：宽度包含该元素的水平内边距和边框，（除了margin以外：border+padding+width）且是一个整数 ele.offsetHeight 它返回该元素的像素高度 （box-sizing:content-box）默认情况下：高度包含该元素的垂直内边距和边框，（除了margin以外：border+padding+width）且是一个整数
ps：元素的offsetHeight，offsetWidth是一种元素CSS高度的衡量标准，包括元素的边框、内边距和元素的水平滚动条或纵向滚动条（如果存在且渲染的话），不包含:before或:after等伪类元素的高度
offsetWidth和offsetHeight是用来得到元素的大小
@offsetHeight 和 style.height的区别
demo.style.height只能获取行内样式，如果样式写到了其他地方，甚至根本就没写，便无法获取
style.height是字符串（而且带单位），offsetHeight是数值
demo.style.height可以设置行内样式，offsetHeight是只读属性
2. offsetLeft／offsetTop
ele.offsetLeft 到距离自身最近的（带有定位的）父元素的 左侧 的距离,如果所有父级都没有定位则以body 为准.
offsetLeft 是自身border左侧到父级padding左侧的距离 -----数值
ele.offsetTop 到距离自身最近的（带有定位的）父元素的 顶侧 的距离,如果所有父级都没有定位则以body 为准. ----数值
offsetLeft和offsetTop是用来得到元素的位置
@offsetLeft和style.left的区别
style.left只能获取行内样式
offsetLeft只读，style.left可读可写
offsetLeft是数值，style.left是字符串并且有单位px
如果没有加定位，style.left获取的数值可能是无效的
最大区别在于offsetLeft以border左上角为基准，style.left以margin左上角为基准
计算方式：从定位的父盒子的边框内部，计算到子盒子的边框外部（边框到边框）
特点：
1、offsetLeft属性没有单位，是纯数值
2、offsetLeft属性是只读的，不可修改
3、offsetLeft属性若有小数，会四舍五入进位
3.offsetParent 获取到当前元素外面的定位父盒子
HTMLElement.offsetParent 是一个只读属性，返回一个指向最近的（closest，指包含层级上的最近）包含该元素的定位元素。如果没有定位的元素，则 offsetParent 为最近的 table, table cell 或根元素（标准模式下为 html；quirks 模式下为 body）。当元素的 style.display 设置为 "none" 时，offsetParent 返回 null。
(offsetParent 很有用，因为 offsetTop 和 offsetLeft 都是相对于其内边距边界的。)
@ offsetParent和parentNode的区别
父元素parentNode，一定是亲爹，外面紧挨着的元素
定位父盒子offsetParent，干爹（有可能是亲爹，也可能不是亲爹）
方法：
// 获取所选元素到浏览器最左边的距离
var getOffsetLeft = function(obj){var tmp = obj.offsetLeft;var val = obj.offsetParent;while(val != null){tmp += val.offsetLeft;val = val.offsetParent;}return tmp;
}
//获取所选元素到浏览器最上边的距离
var getOffsetTop = function(obj){var tmp = obj.offsetTop;var val = obj.offsetParent;while(val != null){tmp += val.offsetTop;val = val.offsetParent;}return tmp;
}
