1 * 能够使用jQuery设置尺寸
2 * .width() width
3 * .innerWidth() width + padding
4 * .outerWidth() width + padding + border
5 * .outerWidth(true) width + padding + border + margin
6 * 能够使用jQuery操作坐标
7 * .offset() 永远基于网页文档（document）获取
8 * .position() 基于定位的祖先元素(offsetParent)获取
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <style>
7 .box{
8 width: 200px;
9 height: 200px;
10 background-color: palegreen;
11 padding:20px;
12 border: 10px solid darkcyan;
13 margin: 50px;
14 }
15 </style>
16 <script src="lib/jquery-1.12.2.js"></script>
17
18 </head>
19 <body>
20 <div class="box">
21 width: 200px<br/>
22 height: 200px<br/>
23 padding:20px<br/>
24 border: 10px solid darkcyan<br/>
25 margin: 50px<br/>
26
27 </div>
28 </body>
29 </html>
30 <script>
31 console.log(".css('width')获取盒子宽度=width:"+$('.box').css('width'));
32 console.log("width()获取盒子宽度= width :"+$('.box').width());
33 console.log("innerwidth()获取盒子宽度= width + padding :"+$('.box').innerWidth());
34 console.log("outerWidth()获取盒子宽度= width + padding + border:"+$('.box').outerWidth());
35 console.log("outerWidth(true)获取盒子宽度= width+ padding + border + margin:"+$('.box').outerWidth(true));
36
37
38
39 </script>
