区分width()、css('width')、innerWidth()

 #widthTest1 {
 width: 200px;
 height: 200px;
 background-color: #00CCFF;
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
 padding: 10px;
 border: 5px solid red;
 }

 #widthTest2 {
 margin-top: 30px;
 width: 200px;
 height: 200px;
 background-color: #00CCFF;
 padding: 10px;
 border: 5px solid red;
 }
 <div id="widthTest1">width test1</div>
 <div id="widthTest2">width test2</div>

 $(function(){
 　　// .width()总是返回内容宽度,不管CSS box-sizing属性值.
     // 截至jQuery 1.8，这可能需要检索的CSS的宽度加加上box-sizing的属性，
 　　// 然后当元素有 box-sizing: border-box时候，减去个元素上任何潜在border和padding值。
 　　// 为了避免这种问题，使用.css( "width" )而非.width()。
 　　console.log('widthTest1 .width()'+$('#widthTest1').width()); // 170
 　　console.log('widthTest2 .width()'+$('#widthTest2').width()); //
 　　//第一个内容宽度是170 第二个内容宽度是200 两者主要区别是box-sizing:border-box;

     // innerWidth()  包括padding，但是不包括border。
     console.log('widthTest1 .width()'+$('#widthTest1').innerWidth()); // 190 = 200 - 5*2
     console.log('widthTest1 .width()'+$('#widthTest2').innerWidth()); // 220 = 200 + 20

 　　console.log('widthTest1 css("width")'+$('#widthTest1').css('width')); // 200px
 　　console.log('widthTest2 css("width")'+$('#widthTest2').css('width')); // 200px
 });