pagyX/Y、clientX/Y、offsetX/Y、screenX/Y；clientHeight、scrollHeight、scrollTop；offsetHeight、offsetTop+滑动条

鼠标的位置：

1、pageX/Y  相对与整个页面的X, Y坐标: 参考位置是页面的左上角

2、clientX/Y  鼠标相对于浏览器窗口可视区域的X，Y坐标（窗口坐标），可视区域不包括工具栏和滚动条，参考位置是可视页面的左上角

3、offsetX/Y  鼠标相对于事件源元素（srcElement）的X,Y坐标，参考位置是元素的左上角。

4、screenX/Y  鼠标相对于用户显示器屏幕左上角的X,Y坐标。

页面的尺寸和位置：

1、clientWidth/Height  可视页面的宽度/高度

2、scrollWidth/Height  整个页面的宽度/高度

3、scrollLeft/Top  相对滚动条左侧/顶部的偏移

元素的尺寸和位置：

1、offsetWidth/Height (划重点⬇⬇)  元素的宽度和高度

offsetWidth/Height包含内边距和边框

css(div,'width')只能获取元素的宽度（不包含padding、border）
元素.offsetWidth  元素占据的宽度 width + padding + border
元素.offsetHeight  元素占据的高度 height + padding + border

如果 clientWidth/Height 定位在页面中的元素上，则指的是该元素的宽/高

和 元素.offsetWidth/Height 的区别是：

clientWidth/Height包含内边距，但不包含边框

元素.clientWidth 元素占据的高度 width + padding - 水平滚动条高度（如果存在）

元素.clientHeight 元素占据的高度 height + padding - 水平滚动条高度（如果存在）

2、offsetLeft/Top  相对于父元素的左边距/上边距

当父级元素没有定位方式时，以页面的左上角为参考位置，计算元素的偏移量；

父级元素有定位方式时，以有定位方式父级元素的左上角为参考位置。

Ps  offsetleft 和 left 的区别：

1、style.left 返回的是字符串，如88px，offsetLeft返回的是数值88

2、style.left是读写的，offsetLeft是只读的，所以要改变div的位置，只能修改style.left

3、style.left的值需要事先定义，而offsetLeft不事先定义也能够取到，无需事先定义div的位置。

以上所提及到的尺寸和位置都是只读属性，不能修改其数值。

为了更好的理解尺寸和位置的用法，下面提供一个滑动条的案例。

成品展示：

详细代码如下：

HTML部分：

    <!-- 整个滑动条 scroll -->
    <div class="scroll">
        <!-- 滑动痕迹 scrollRunway -->
        <div class="scrollRunway">
            <!-- 滑动按钮 bar -->
            <div class="bar"></div>
        </div>
        <!-- 显示偏移量的 alertInfo -->
        <div class="alertInfo">0</div>
    </div>

CSS部分：

        * {
            margin: 0;
            padding: 0;

        }

        .scroll {
            position: relative;
            margin: 100px;
            width: 500px;
            height: 5px;
            background: #ccc;
        }

        .scroll .scrollRunway {
            position: absolute;
            top: 0;
            left: 0;
            width: 0;
            height: 100%;
            background-color: #409eff;
        }

        .scroll .alertInfo {
            position: absolute;
            top: -43px;
            left: -15px;
            width: 30px;
            height: 25px;
            line-height: 25px;
            background-color: black;
            color: #fff;
            text-align: center;
        }

        .scroll .alertInfo::after {
            content: '';
            position: absolute;
            left: calc(50% - 5px);
            bottom: -10px;
            width: 0;
            height: 0;
            border: 5px solid transparent;
            border-top-color: black;
        }

        .bar {
            position: absolute;
            top: -9px;
            left: -9px;
            width: 16px;
            height: 16px;
            border: 2px solid #409eff;
            background-color: #fff;
            border-radius: 50%;
            cursor: pointer;
        }

        p {
            margin-left: 100px;
        }

JS部分：

        // 获取滑动条外层盒子元素
        var scroll = document.querySelector('.scroll');
        // 获取滑动按钮
        var bar = document.querySelector('.bar');
        // 获取滑动痕迹
        var scrollRunway = document.querySelector('.scrollRunway');
        // 获取滑动偏移量的黑框框
        var alertInfo = document.querySelector('.alertInfo');

        // 鼠标按下 滑动按钮 时
        bar.onmousedown = function (ev) {
            // 移动滑动按钮时
            document.onmousemove = function (ev) {
                // 计算移动的距离 left（移动痕迹的宽度）（滑动按钮 和 黑框框 移动的距离）
                var left = ev.pageX - scroll.offsetLeft;
                // 限制滑动按钮不超出滑动条
                if (left < 0) {
                    left = 0;
                } else if (left > scroll.offsetWidth) {
                    left = scroll.offsetWidth;
                }
                // 滑动痕迹的宽度 = 滑动的距离
                scrollRunway.style.width = left + 'px';

                // 滑动按钮的偏移量 = 滑动按钮宽度/2 + 滑动距离
                bar.style.left = -9 + left + 'px';// 这里之所以要加上 -9 ，是因为要从滑动按钮的正中心算起
                // 黑框框的偏移量 = 黑框框的宽度/2 + 滑动距离
                alertInfo.style.left = -15 + left + 'px';// 这里之所以要加上 -15 ，是因为要从黑框框的正中心算起
                // 把滑动偏移量（滑动距离在整个滑动条中所占的比例）写入html中
                alertInfo.innerHTML = Math.round(left / scroll.offsetWidth * 100);
            }

        }

        // 滑动条的点击事件：点击滑动条的任意位置，滑动按钮立刻移动到该位置
        scroll.onclick = function (ev) {
            var left = ev.pageX - this.offsetLeft;
            if (left < 0) {
                left = 0;
            } else if (left > this.offsetWidth) {
                left = this.offsetWidth;
            }
            scrollRunway.style.width = left + 'px';
            bar.style.left = -9 + left + 'px';
            alertInfo.style.left = -15 + left + 'px';

            alertInfo.innerHTML = Math.round(left / this.offsetWidth * 100);
        }

        //当鼠标弹起的时候，不做任何操作
        document.onmouseup = function () {
            document.onmousemove = null;
        }

由于是初学小白，代码还不够简便，但是希望能够给大家提供到帮助。