偏移量offset、可视区client、滚动scroll（笔记）

PC页面的特效

元素偏移量offset系列

可以动态的得到该元素的位置（偏移），大小等。
1.获得元素距离带有定位父元素的位置
2.获得元素自身的大小
3.返回的数值都不带单位
offsetParent：返回昨晚该元素带有定位的父级元素，如果父级都没有定位则返回body。
区别：//parentNode:返回最近一级的父亲，不管有没有定位。
offsetTop：返回元素是相对带有定位父元素上方的偏移。
offsetLeft：返回元素相对带有父元素左边框的偏移。（没有父元素则以body为准）
offsetWidth：返回自身包括padding、边框、内容区的宽度、返回数值不带单位。
offsetHeight：返回自身包括padding、边框、内容区的高度、返回数值不带单位。

offset与style的区别：
(只读属性)offset：1.可以得到任意样式表中的样式值
2.获得的数值是没有单位的
3.offsetWidth包含padding+border+width
4.offsetWidth等属性是只读属性，只能获得不能赋值
（我们获取元素大小位置，用offset合适）

style：1.只能得到行内样式表的样式值
2.style.width获得带有单位的字符串
3.style.width获得不包含padding和border的值
4.style.width是可读性属性，可以获取也可以赋值
(我们想要给元素该值，则需要style改变)

案例：移动鼠标获取到鼠标在盒子里的坐标。

核心代码。

mouseover是鼠标移动事件。

// var box = document.querySelector('.box');
        box.addEventListener('mouseo