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)获取
demo
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 .box{ 8 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 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')获取盒子宽度="+$('.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>