伪元素 scroll家族 client家族 事件对象

1、伪元素(::before和::after)

    可以在元素的前面和后面加内容，默认是行内元素，加属性之前记得转换为行内块。

---

2、scroll家族

    scrollWidth和scrollHeight：获取的是盒子内容的宽和高，有子元素就是子元素的宽和高，没有子元素则是自身的宽和高。即：获取的是边框内的所有内容的宽和高（包括padding的值）

    scrollLeft：获取的是往左边滚出去的宽度（左边看不见部分的宽度，包括边框）

    scrollTop：获取的是往上边滚出去的高度（上边看不见部分的宽度，包括边框）

    window.pageYOffset和window.pageXOffset：有兼容性问题

    window.pageYOffset：获取的而是网页往上滚出去的高度

    window.pageXOffset：获取的而是网页往左滚出去的宽度

    overflow：auto；  超出的部分加个滚动条

    拖动滚动条触发事件：onscroll

---

3、document：获取文档

  document.documentElement：获取html

  document.body：获取body

---

4、client家族

    clientWidth和clientHeight：获取的是可视区域的宽和高，一般不会用在元素上，用在网页上，来获取网页可视区域的宽和高。

    clientLeft和clientTop：获取的是元素左边框的宽度和上边框的高度

    window.innerWidth和window.innerHeight：获取的是网页的可视区域宽和高

    window.onresize：监听网页的宽高变化（做响应式布局）

---

5、事件对象：当任何事件触发时，浏览器会自动创建一个对象，这个对象里包含这个触发事件的所有信息。

    如何获取这个事件对象？

    在事件绑定的函数里，写一个形参就可以了，这个形参就是事件对象。（IE8以后的版本）

    window.event获取（IE8以前的版本）

    但是形参不能乱写，最好写e或者event。这是一个规范

---

6、事件对象中的三大坐标系

    e.screenX和e.screenY：获取的是相对屏幕左上角的坐标

    e.pageX和e.pageY：获取的是相对于文档左上角的坐标（这个有兼容问题）

    e.clientX和e.clientY：获取的是相对于可视区域左上角的坐标