width():
不包括元素的外边距(margin)、内边距(padding)、边框(border)等部分的宽度。
innerWidth():
包括元素的内边距(padding)，但不包括外边距(margin)、边框(border)等部分的宽度。
outerWidth():
包括元素的内边距(padding)、边框(border)，但不包括外边距(margin)部分的宽度。你也可以指定参数为true，以包括外边距(margin)部分的宽度。
1 <body> 2 <div class="box"></div> 3 </body>
1 <style> 2 .box{ width: 100px;height: 100px;background-color: red; } 3 </style>
1 <script> 2 $(function () { 3 //无边距 4 console.log("width",$(".box").width());//100px 5 console.log("innerWid", $(".box").innerWidth());//100px 6 console.log("outerWid",$(".box").outerWidth());//100px 7 //加padding 10px; 8 $(".box").css("padding", "10px"); 9 console.log("width", $(".box").width());//100px 10 console.log("innerWid", $(".box").innerWidth());//120px 11 console.log("outerWid", $(".box").outerWidth());//120px 12 //加border 5px 13 $(".box").css("border", "5px solid orange"); 14 console.log("width", $(".box").width());//100px 15 console.log("innerWid", $(".box").innerWidth());//120px 16 console.log("outerWid", $(".box").outerWidth());//130px 17 //加margin 10px 18 $(".box").css("margin", "10px"); 19 console.log("width", $(".box").width());//100px 20 console.log("innerWid", $(".box").innerWidth());//120px 21 console.log("outerWid", $(".box").outerWidth());//130px 22 console.log("outerWid", $(".box").outerWidth(true));//150px 23 }) 24 </script>