console 命令行工具 X clear

console

let baba = document.querySelector('.baba')
        let son = document.querySelector('.son')
        // offset系列
        // 1.可以得到元素的偏移量 返回的数值 不带单位
        console.log(baba.offsetTop); // 100
        console.log(baba.offsetLeft); // 100

        console.log(son.offsetLeft); // 110 100 + 10 (son多了margin10)
        
        // 2.它以带有定位的父元素为准, 如果父元素没有定位
        //  则以body为准
        console.log(son.offsetLeft); // 110
        // 3. offsetParent与 parentNode的区别?
        console.log(son.offsetParent); //<body>...</body>
        // 返回有定位的父亲,没有则返回body
        console.log(son.parentNode);  // <div class="baba">...</div>
        // 返回父亲,是最近的一级父亲,亲爸爸,不管父亲有没有定位

<div class="baba">
        <div class="son"></div>
    </div>

*{
    margin: 0;
    padding: 0;
}
.baba{
    width: 200px;
    height: 200px;
    background-color: skyblue;
    margin: 100px;
    /* position: absolute; */
}
.son{
    width: 100px;
    height: 100px;
    background-color: pink;
    margin-left: 10px;
}