clientWidth,offsetWidth,scrollWidth,clientLeft,offsetLeft,scrollLeft,getBoundingRect()一次理解清楚！！！

    //下面的都是属于DOM规范的内容
    //element指的是元素的DOM,可以是document.body,也可也是document.getxxx()
    //element.clientWidth;(元素内部宽度,width+padding)
    //element.offsetWidth(元素内部宽度,width+padding+border+scroll)
    //element.scrollWidth(返回元素的整体宽度,包括溢出部分)
    //element.clientLeft(元素左边框宽度，就是border的宽度)
    //element.offsetLeft(元素左边框和最近的定位祖先元素的距离)
    //element.scrollLeft(元素左端到可视区域左端的距离)
    //event.clientX(鼠标事件相对于整个窗口可视区域的x坐标，不随滚动变化)
    //event.offsetX(鼠标事件相对于源元素的x坐标)
    //event.pageX(鼠标事件相对于整个文档可视区域的x坐标，随滚动变化，会计算滚动距离，搞清楚与clientX的区别)
    //event.screenX(鼠标事件相对于屏幕左侧的X坐标，可以把浏览器窗口化，往右拖动测试)
    //element.getBoundingRect()（返回值是一个对象，有上下左右宽高六个属性，元素左边框相对于窗口可视区的距离，
    //会包含小数，有可能为负值）
    //window.innerWidth：浏览器窗口可视区宽度（和clientWidth的区别是他包含滚动条，不同视口下和clientWidth大小不一样）
    //实际使用的时候用两者的最大值（不包括浏览器控制台、菜单栏、工具栏）
    //如果其中之一为空就用0替代，避免报错
    console.log('滚动条宽度:',document.body.clientWidth-window.innerWidth);   //差值即为滚动条宽度
    // document是针对DOM的属性，window是针对整个窗口的属性，特征就是包含滚动条，screen是针对整个屏幕的属性
    //日常使用
    const viewPortWidth=Math.max(document.body.clientWidth || 0,window.innerWidth || 0)