视窗宽高offset、client、scroll

先看盒子模型

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title>视窗宽高</title>
 5 </head>
 6 <style type="text/css">
 7     *{
 8         margin: 0;
 9         padding: 0;
10     }
11     .box1{
12         width: 200px;
13         height: 200px;
14         background: #007d65;
15         margin: 20px 50px;
16         padding: 30px 60px;
17         border: 30px solid #7fb80e;
18         position: absolute;
19         top: 100px;
20         left: 200px;
21         overflow: scroll;
22     }
23 
24 </style>
25 <body>
26     <div class="box1">
27         <p>这里是内容框这里是内容框这里是内容框这里是内容框这里是内容框这里是内容框这里是内容框这里是内容框这里是内容框这里是内容框这里是内容框这里是内容框这里是内容框这里是内容框这里是内容框这里是内容框这里是内容框这里是内容框这里是内容框这里是内容框这里是内容框这里是内容框这里是内容框这里是内容框</p>
28     </div>
29 </body>
30 <script type="text/javascript">
31     box1=document.getElementsByTagName('div')[0];
32     console.log('offsetTop='+box1.offsetTop);           //120
33     console.log('offsetLeft='+box1.offsetLeft);         //250
34     console.log('offsetWidth='+box1.offsetWidth);       //380
35     console.log('offsetHeight='+box1.offsetHeight);     //320
36     console.log('clientWidth='+box1.clientWidth);       //303
37     console.log('clientHeight='+box1.clientHeight);     //243
38     console.log('scrollWidth='+box1.scrollWidth);       //303
39     console.log('scrollHeight='+box1.scrollHeight);     //354
40 </script>
41 </html>

有滚动条,滚动条在padding内,占用了padding,paading不够填充,便占用content区域,所以content大小为
width：200(CSS)-17(滚动条)
height：200(CSS)-17(滚动条)

offsetTop: div上外border线到视窗顶的距离
offsetLeft: div左外border线到视窗左的距离
offsetWidth=borderLeft+paddingLeft+cssWidth+paddingRight+borderRight
offsetHeight=borderTop+paddingTop+cssHeight+paddingBottom+borderBottom
clientWidth(可视区域宽度): paddingLeft+cssWidth+paddingRight-滚动条宽
scrollWidth(实际内容宽度): paddingLeft+cssWidth+paddingRight-滚动条宽+滚动条可以滚动的长度(若无滚动，则等于clientWidth，即本例)
clientHeight(可视区域高度): paddingTop+cssHeight+paddingBottom-滚动条宽
scrollHeight(实际内容高度): paddingTop+cssHeight+paddingBottom-滚动条宽+滚动条可以滚动的长度