1. <!DOCTYPE html>
  2. <html lang="zh">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>offset</title>
  8.     <style type="text/css">
  9.         *{
  10.             margin: 0;
  11.             padding: 0;
  12.         }
  13.         .father{
  14.             width: 200px;
  15.             height: 200px;
  16.             border:10px solid red;
  17.             /* display: none; */
  18.             margin:  20px; 
  19.             /* position: absolute; */
  20.         }
  21.         .son{
  22.             width: 50px;
  23.             height: 50px;
  24.             background: pink;
  25.             margin-left: 20px;
  26.             margin-top: 20px;
  27.             padding: 10px;
  28.         }
  29.     </style>
  30. </head>
  31. <body>
  32.     <div class="father">
  33.         <div class="son">
  34.         </div>
  35.     </div>
  36.     <div class="sub"></div>
  37.     <script type="text/javascript">
  38.         var son = document.querySelector('.son')
  39.         var father = document.querySelector('.father')
  40.     //offset 智能读取
  41.         console.log(father.offsetLeft)
  42.         console.log(father.offsetTop)
  43.         // 盒子 的宽度
  44.         console.log(son.offsetWidth)
  45.         // 盒子 的高度
  46.         console.log(son.offsetHeight)
  47.         // 盒子 和浏览器边框的x轴距离
  48.         console.log(son.offsetTop)
  49.         // 盒子 和浏览器边框的Y轴距离
  50.         console.log(son.offsetLeft)
  51.         //寻找有定位的父级 如果没有定位 直接找到 body
  52.         console.log(son.offsetParent)
  53.     </script>
  54. </body>
  55. </html>