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

#widthTest1 {
 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;
 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()); // 200
　　//第一个内容宽度是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
});