一、元素偏移量offset系列

offset 翻译过来就是偏移量，我们使用 offset系列相关属性可以动态的得到该元素的位置（偏移）、大小等。

图示：

必须记住的属性看下图：

代码演示：

 <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .father {
            position: relative;
            width: 200px;
            height: 200px;
            background-color: pink;
            margin: 150px 100px;
        }
        
        .son {
            width: 100px;
            height: 100px;
            background-color: purple;
            margin-left: 45px;
        }
        
        .w {
            width: 200px;
            height: 200px;
            background-color: skyblue;
            margin: 0 auto 200px;
            padding: 10px 20px;
            border: 15px solid red;
        }
</style>

    <div class="father">
        <div class="son"></div>
    </div>
    <div class="w"></div>

js代码：

<script>
        var father = document.querySelector('.father');
        var son = document.querySelector('.son');
        console.log(father.offsetTop);
        console.log(father.offsetLeft);
        console.log('---------------');
        console.log(son.offsetLeft);
        console.log(son.offsetTop);
        console.log('---------------');
        var w = document.querySelector('.w');
        console.log(w.offsetWidth);
        console.log(w.offsetHeight);
</script>

输出结果：

1、返回body上方的偏移； 150就等于margin: 150px；输出数值不带单位；

2、返回body左边框的偏移； 100就是等于margin: 100px；不带单位；

3、返回元素相对带有定位父元素上方的偏移；45就是等于margin-left: 45px;不带单位；

4、返回元素相对带有定位父元素左边框的偏移；0就是等于margin: 0；不带单位；

5、返回自身包括padding、边框、内容区的宽度；270等于width: 200px+padding: 20px+padding: 20px+border: 15px+border: 15px；

6、返回自身包括padding、边框、内容区的高度；250等于width: 200px+padding: 10px+padding: 10px+border: 15px+border: 15px；

二、元素可视区client系列

client 翻译过来就是客户端，我们使用 client 系列的相关属性来获取元素可视区的相关信息。通过 client系列的相关属性可以动态的得到该元素的边框大小、元素大小等。

图示：

必须记住的属性：

代码演示：

<style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            border-top: 10px solid red;
            border-left: 20px solid red;
            padding: 10px 30px;
        }
</style>
    <div></div>

js代码：

<script>
        var div = document.querySelector('div');
        console.log(div.clientWidth);
        console.log(div.clientHeight);
        console.log(div.clientLeft);
        console.log(div.clientTop);
</script>

输出结果：