目标：掌握元素大小和位置获取方法，为后续网页特效打基础

scroll家族

 使用场景：
我们想要页面滚动一段距离，比如100px，就让某些元素
显示隐藏，那我们怎么知道，页面滚动了100像素呢？
就可以使用scroll 来检测页面滚动的距离~~~

alt


// scrollWidth scrollHeight  内容 宽高 （了解）
        let div = document.querySelector('div')
        console.log(div.scrollWidth)  // 150 不带单位
        console.log(div.scrollHeight)  // 336 不带单位

offset使用场景：

前面使用了scroll进行滚动判定事件，但是滚动的距离却是由我们自己计算的，这样的方式在以后的项目当中并不可行，所以我们需要用到offset

获取元素的自身宽高、包含元素自身设置的宽高、padding、border

 获取元素距离自己定位父级元素的左、上距离

 offsetLeft和offsetTop 注意是只读属性

clent 代表当前可视区域 不包含滚动条 边框等等