1 * 能够使用jQuery设置尺寸2* .width() width3* .innerWidth()width + padding4* .outerWidth()width + padding + border5* .outerWidth(true) width + padding + border + margin6* 能够使用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 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">21width: 200px<br/>22height: 200px<br/>23padding:20px<br/>24border: 10px solid darkcyan<br/>25margin: 50px<br/>26 27</div>28 </body>29 </html>30 <script>31console.log(".css('width')获取盒子宽度=width:"+$('.box').css('width'));32console.log("width()获取盒子宽度= width :"+$('.box').width());33console.log("innerwidth()获取盒子宽度= width + padding :"+$('.box').innerWidth());34console.log("outerWidth()获取盒子宽度= width + padding + border:"+$('.box').outerWidth());35console.log("outerWidth(true)获取盒子宽度= width+ padding + border + margin:"+$('.box').outerWidth(true));36 37 38 39 </script>