client offset scroll 三大家族

        var box = document.getElementById("box");

        // 1. width 和 height
         // border + padding + 内容的宽度和高度
         console.log(box.offsetWidth, box.offsetHeight);
         // padding + 内容的宽度和高度
         console.log(box.clientWidth, box.clientHeight);
         // 能够滚动的内容的 宽度 和 高度
         console.log(box.scrollWidth, box.scrollHeight);


        // 2. top 和 left
        // 当前元素距离有定位的父盒子左边的距离；offsetTop: 当前元素距离有定位的父盒子上边的距离
        console.log(box.offsetLeft, box.offsetTop);
        // clientLeft: 左边边框的宽度；clientTop: 上边边框的宽度
        console.log(box.clientLeft, box.clientTop);
        // scrollLeft: 左边滚动的长度; scrollTop: 上边滚动的长度;
        console.log(box.scrollLeft, box.scrollTop);

        // 3. width 和 height
        // 屏幕可视区域的的宽度和高度
        // clientWidth  clientHeight 有兼容性问题，需要封装
        function client() {
            if (window.innerWidth) { // ie9+ 最新的浏览器
                return {
                    width: window.innerWidth,
                    height: window.innerHeight
                }
            } else if (document.compatMode === "CSS1Compat") { // W3C
                return {
                    width: document.documentElement.clientWidth,
                    height: document.documentElement.clientHeight
                }
            }

            return {
                width: document.body.clientWidth,
                height: document.body.clientHeight
            }
        }