1.三大家族

1. offset家族 : 获取元素 ‘元素自身’ 的真实宽高和真实位置

1.offsetWidth / offsetHeight : 获取 width+padding+border

offsetLeft / offsetTop : 获取左/上外边框到定位父元素左/上内边框距离

2. scroll家族 : 获取元素 ‘元素内容’ 的真实宽高和位置

scrollWidth / scrollHeight : 获取内容的宽高

scrollLeft / scrollTop : 内容的位置（就是滚动条滚动的距离）

client家族 : 获取元素 ‘元素可视区域’ 宽高和位置

clientWidth / clientHeight : 可视区域大小

clientLeft / clientTop : 可视区域位置（就是左边框和上边框宽度）

/*三大家族

1. offset家族 : 获取元素 ‘元素自身’ 的真实宽高和真实位置

offsetWidth / offsetHeight : 获取 width+padding+border

offsetLeft / offsetTop : 获取左/上外边框到定位父元素左/上内边框距离

2. scroll家族 : 获取元素 ‘元素内容’ 的真实宽高和位置

scrollWidth / scrollHeight : 获取内容的宽高

scrollLeft / scrollTop : 内容的位置（就是滚动条滚动的距离）

3.client家族 : 获取元素 ‘元素可视区域’ 宽高和位置

clientWidth / clientHeight : 可视区域大小

clientLeft / clientTop : 可视区域位置（就是左边框和上边框宽度）

<script>
    
    let box = document.querySelector('.box')
    //三大家族是dom语法，不是css样式。
    //错误写法： 元素.style.offsetWidth
    //正确写法： 元素.offsetWidth
    // 1. offset家族
    console.log(box.offsetWidth, box.offsetHeight)// 190 190
    console.log(box.offsetLeft, box.offsetTop)// 100 100

    //2. scroll家族
    console.log( box.scrollWidth , box.scrollHeight )//153 419
    console.log( box.scrollLeft , box.scrollTop )//0 0 默认没有滚动

    //3. client家族
    console.log( box.clientWidth , box.clientHeight ) // 153 170
    console.log( box.clientLeft , box.clientTop ) // 10 10

  </script>

2.获取网页滚动距离

1.给页面注册滚动事件 : window.onscroll

2.获取页面滚动距离 : document.documentElement.scrollTop

//1.给页面注册滚动条事件  onscroll
        window.onscroll = function () {
            //2.获取页面滚动的距离  html标签的scrollTop
            console.log(document.documentElement.scrollLeft, document.documentElement.scrollTop)

2.1 scroll案例：固定导航==

需求分析：当页面的顶部区域滚动出去之后，页面的导航栏不再滚动，而是固定在顶部

- 思路分析：监听页面的滚动，当滚动距离超出顶部区域高度时，设置导航栏为fixed固定定位

- 通过改变类名即可改变样式

scrolTop思路

(应用于:固定导航 )

//1.给页面注册滚动条事件

window.onscroll = function(){

//2.获取网页滚动距离

let y = document.documentElement.scrollTop;

<script>
    /* 
    1.给页面注册滚动条事件 ： 监听垂直方向滚动距离
    2.获取当前滚动的scrollTop,如果超过指定范围就设置为固定导航
     */


    let topPart = document.querySelector('#topPart');
    let navBar = document.querySelector('#navBar');
    let mainPart = document.querySelector('#mainPart');


    //1.给页面注册滚动条事件
    window.onscroll = function(){
        //2.获取网页滚动距离
        let y = document.documentElement.scrollTop;
        if( y >= topPart.offsetHeight ){
            //设置nav为固定定位
            navBar.style.position = 'fixed';
            navBar.style.top = 0;
            /* 注意点：设置为固定定位之后，元素会脱标。下方盒子就会瞬间顶上来，造成顿闪现象
            解决方案：设置下方的元素的margin值，撑开脱标的高度
             */
             mainPart.style.marginTop = 10 + navBar.offsetHeight + 'px';
        }else{
            //设置nav为标准流
            navBar.style.position = 'static';
            //移除下方盒子脱标的margin
            mainPart.style.marginTop = '10px';
        };
    };
</script>

2.2 client案例：响应式布局

复习响应式布局原理

1.响应式布局：一个html同时适配多个不同设备

2.响应式原理：根据不同屏幕加载不同样式

a.媒体查询

b.client家族

3.响应式布局练习

设备尺寸样式

大PC >1200px 红

小PC 992-1200px 橙

平板 768-992px 黄

手机 <768px 绿

clientHeight思路:

1.给页面注册视口大小变化 onresize

window.onresize = function(){

2.获取当前视口尺寸

let w = document.documentElement.clientWidth

 //1.先给页面注册大小变化事件 ： 监听视口的变化
         window.onresize = function(){
            //2.获取当前视口尺寸

let w = document.documentElement.clientWidth;

            let h = document.documentElement.clientHeight;
            console.log(w,h);
            


            if( w >= 1200 ){
                document.body.style.backgroundColor = 'red';
            }else if( w > 992){
                document.body.style.backgroundColor = 'orange';
            }else if( w > 768 ){
                document.body.style.backgroundColor = 'yellow';
            }else{
                document.body.style.backgroundColor = 'green';
            };


            /* 横竖屏适配 */
            if( w < h ){
                alert('竖屏');
            }else{
                alert('横屏');
            };
         };

DOM-网页特性-轮播图

1.三大家族

1. offset家族 : 获取元素 ‘元素自身’ 的真实宽高 和 真实位置

client家族 : 获取元素 ‘元素可视区域’ 宽高 和 位置