位置计算总结（1）踩坑 offsetleft、offsettop、offsetwidth、offsetheight，这

总结

（1）踩坑
offsetleft、offsettop、offsetwidth、offsetheight，这四个函数最终获取的均为整数 取整方式为四舍五入（负数向下取整正数向上取整），因此想获取准确的位置带有小数的信息，请用getBoundingClientRect()代替吧

测试

<style>
    * {
        margin: 0;
        padding: 0;
    }
    .myDiv {
        position: absolute;
        top: 400.4px;
        left: 400.5px;
        background-color: #06c1ae;
        height: 100.4px;
        width: 100.5px;
    }
</style>

<body>
    <p class="myDiv">我知道了</p>
    <script>
        const myDiv = document.querySelector('.myDiv')
        console.log(myDiv.offsetTop) // 401
        console.log(myDiv.offsetLeft) // 401
        console.log(myDiv.offsetHeight) // 101
        console.log(myDiv.offsetWidth) // 101

        console.log('444444--getBoundingClientRect')
        console.log(myDiv.getBoundingClientRect())
    </script>
</body>

offset结果：

getBoundingClientRect 结果：