offset 概述
使用 offset 系列属性可以动态得到该元素的位置（偏移），大小等
| offset系列属性 |
说明（只读属性） |
ele.offsetTop |
返回元素带有定位的父元素上方的偏移，父元素没有定位以body为准 |
ele.offsetLeft |
返回元素带有定位的父元素左边的偏移，父元素没有定位以body为准 |
ele.offsetWidth |
返回自身包括padding，边框，内容去的宽度 |
ele.offsetHeight |
返回自身包括padding，边框，内容去的高度 |
ele.offsetParent |
返回该元素带有定位的父元素，如果没有父级返回body |
元素可视区 client 系列
使用client系列的相关属性来获取元素可视区的相关信息，通过client系列的相关属性可以动态的得到该元素的边框大小，元素大小等；
| client系列属性 |
说明 |
ele.clientTop |
返回元素上边框大小 |
ele.clientLeft |
返回元素做边框大小 |
ele.clientWidth |
返回元素自身包含padding，内容宽度，不含边框 |
ele.clientHeight |
返回元素自身包含padding，内容高度，不含边框 |
使用scroll系列的属性可以动态获取该元素的大小，滚动距离等
// onscroll 事件，滚动条滚动触发
div.addEventListener('scroll', function () {});
div.onscroll = function () {}
| scroll系列属性 |
说明（元素） |
ele.scrollTop |
返回被卷去的上侧距离 |
ele.scrollLeft |
返回被卷去的左侧距离 |
ele.scrollWidth |
返回自身实际的内容（例：文字溢出后）宽度，包含padding，不含边框 |
ele.scrollHeight |
返回自身实际的内容（例：文字溢出后）高度，包含padding，不含边框 |
| 页面被卷去的距离 |
说明（整个页面） |
window.pageYOffset |
页面被卷去的头部 |
window.pageXOffset |
页面被卷去的左边 |
mouseover 和 mouseenter 事件的区别
- 当鼠标移动到元素上时都会触发事件
mouseover 经过自身盒子会触发，经过子盒子也会触发，mouseenter 只会经过自身和子会触发mouseenter 不会存在事件冒泡；mouseover 有冒泡的概念；- 跟
mouseenter搭配，鼠标离开时 mouseleave 同样不会冒泡