面试准备—详解offset、client、scroll

一、offset属性：

1. offsetWidth = width + border + padding
2. offsetHeight = height + border + padding
3. offsetTop = 元素相对于浏览器顶部的距离
4. offsetLeft = 元素相对于浏览器左边的距离
   功能：只读（获取）不写（设置）
5. 子元素的offsetTop和offsetLeft：
   关键看父元素是否设置了定位，若有则相对于父元素的上边框和左边框的距离；
   若没有则相对于浏览器顶部和左边的距离。
6. offsetParent:嵌套关系的标签，默认选中的是body，若父元素添加了定位，则选中的是父元素。
   如big标签下是small标签，var ele = small.offsetParent;console.log(ele)

二、scroll属性：

1. scrollWidth = width + padding-left + padding-right
2. scrollHeight = height + padding-top + padding-bottom
3. scrollTop = 滚动条滚动之后相对于浏览器顶部的距离
4. scrollLeft = 滚动条滚动之后相对于浏览器左边的距离
5. 根元素引用scrollTop属性：document.documentElement = 根节点
6. 获取页面超出浏览器顶部的大小：
   var top = document.documentElement.scrollTop（有声明文档类型） || document.body.scrollTop（没有声明文档类型）;（兼容写法）

三、client属性：

1. clientWidth: width + padding (不包含边框)
2. clientHeight: height + padding (不包含边框)
3. clientTop: border-top (获取当前元素上边框的大小)
4. clientLeft: border-left (获取当前元素左边框的大小)