1 // 结构
 2 <div id="box">
 3     <div id="child">
 4       
 5     </div>
 6 </div>
 7 // 样式
 8   <style>
 9     body {
10       margin: 0;
11     }
12     #box {
13       position: relative;
14       width: 300px;
15       height: 300px;
16       background-color: red;
17       overflow: hidden;
18       margin: 50px;
19     }
20     #child {
21       width: 100px;
22       height: 100px;
23       background-color: blue;
24       margin: 50px;
25       border: 10px solid yellow;
26       padding: 10px;
27     }
28   </style>
29 // js
30 <script>
31    // 获取子元素的位置和大小
32     var child = document.getElementById(‘child‘);
33     console.log(child.offsetParent);
34     // 获取child的位置     offsetLeft 距离offsetParent的横向偏移
35     console.log(child.offsetLeft);
36     console.log(child.offsetTop);
37 
38     // 获取child的大小   包括边框和padding
39     console.log(child.offsetWidth);
40     console.log(child.offsetHeight);
41 </script>