client家族
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>页面尺寸事件</title>
</head>
<style>div {display: inline-block;/* width: 200px; */height: 200px;background-color: pink;padding: 10px;}
</style><body><div>2321221313131321131312321</div><script>const div = document.querySelector('div')console.log(div.clientWidth)// resize 浏览器窗口发生变化时触发的事件window.addEventListener('resize', function () {console.log('我变化')})</script>
</body></html>
offest家族
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<style>div {position: relative;width: 200px;height: 200px;background-color: pink;margin: 100px;}p {width: 100px;height: 100px;background-color: blue;margin: 50px;}
</style><body><div><p></p></div><script>const div = document.querySelector('div')const p = document.querySelector('p')// console.log(div.offsetLeft)// 检测盒子的位置，看最近一级带有定位的祖先元素console.log(p.offsetLeft)</script>
</body></html>
