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：获取的是相对于可视区域左上角的坐标
