width():
不包括元素的外边距(margin)、内边距(padding)、边框(border)等部分的宽度。
innerWidth():
包括元素的内边距(padding)，但不包括外边距(margin)、边框(border)等部分的宽度。
outerWidth():
包括元素的内边距(padding)、边框(border)，但不包括外边距(margin)部分的宽度。你也可以指定参数为true，以包括外边距(margin)部分的宽度。
<body>
<div class="box"></div>
</body>
<style>
.box{ width: 100px;height: 100px;background-color: red; }
</style>
<script>
$(function () {
//无边距
console.log("width",$(".box").width());//100px
console.log("innerWid", $(".box").innerWidth());//100px
console.log("outerWid",$(".box").outerWidth());//100px
//加padding 10px;
$(".box").css("padding", "10px");
console.log("width", $(".box").width());//100px
console.log("innerWid", $(".box").innerWidth());//120px
console.log("outerWid", $(".box").outerWidth());//120px
//加border 5px
$(".box").css("border", "5px solid orange");
console.log("width", $(".box").width());//100px
console.log("innerWid", $(".box").innerWidth());//120px
console.log("outerWid", $(".box").outerWidth());//130px
//加margin 10px
$(".box").css("margin", "10px");
console.log("width", $(".box").width());//100px
console.log("innerWid", $(".box").innerWidth());//120px
console.log("outerWid", $(".box").outerWidth());//130px
console.log("outerWid", $(".box").outerWidth(true));//150px
})
</script>