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;
}