offset翻译过来就是偏移量
获得元素距离带有定位父元素的位置获得元素自身的大小（宽度高度）注意:返回的数值都不带单位常用属性
<body> <div class="father"> <div class="son"></div> </div> <div class="w"></div> <script> // offset 系列 var father = document.querySelector('.father'); var son = document.querySelector('.son'); 1.可以得到元素的偏移 位置 返回的不带单位的数值 console.log(father.offsetTop); console.log(father.offsetLeft); 它以带有定位的父亲为准 如果么有父亲或者父亲没有定位 则以 body 为准 console.log(son.offsetLeft); var w = document.querySelector('.w'); 2.可以得到元素的大小 宽度和高度 是包含padding + border + width console.log(w.offsetWidth); console.log(w.offsetHeight); 3. 返回带有定位的父亲 否则返回的是body console.log(son.offsetParent); // 返回带有定位的父亲 否则返回的是body console.log(son.parentNode); // 返回父亲 是最近一级的父亲 亲爸爸 不管父亲有没有定位 </script> </body>offset 与 style 区别：
client翻译过来就是客户端，我们使用client系列的相关属性来获取元素可视区的相关信息。client系列的相关属性可以动态的得到该元素的边框大小、元素大小等。
立即执行函数
<script> // 1.立即执行函数: 不需要调用，立马能够自己执行的函数 // 2. 写法 也可以传递参数进来 1.(function() {})() 或者 2. (function(){}()); (function(a, b) { console.log(a + b); var num = 10; })(1, 2); // 第二个小括号可以看做是调用函数 (function sum(a, b) { console.log(a + b); var num = 10; // 局部变量 }(2, 3)); 3. 立即执行函数最大的作用就是 独立创建了一个作用域, 里面所有的变量都是局部变量 不会有命名冲突的情况 </script>scroll翻译过来就是滚动的，我们使用scroll系列的相关属性可以动态的得到该元素的大小、滚动距离等。 滚动就会触发scroll事件 （onscroll） 元素被卷去的头部：element.scrollTop 页面被卷去的头部：window.pageYOffset
主要用法∶
offset系列经常用于获得元素位置offsetLeft | offsetTopclient经常用于获取元素大小clientWidth | clientHeightscroll经常用于获取滚动距离scrollTop | scrolLeft注意页面滚动的距离通过window.pageXoffset获得mouseenter mouseover的区别： mouseenter鼠标事件 当鼠标移动到元素上时就会触发mouseenter事件。类似mouseover，它们两者之间的差别是：
mouseover鼠标经过自身盒子会触发，经过子盒子还会触发mouseenter只会经过自身盒子触发 之所以这样，因为mouseenter不会冒泡，跟mouseenter搭配鼠标离开mouseleave同样不会冒泡