JQ中的width()，height(),innerwidth(),innerheight(),outerwidth(),outheight()的區別

一直以來都對jq的
width()，
height(),
innerwidth(),
innerheight(),
outerwidth(),
outheight()
有着困惑，並且老是記不住，所以這次就特意找個時間來研究他們的區別，也做一個總結，方便下次查閱：

<div class="box" id="box">

</div>
<p><span>width:</span><span id="width"></span></p>
<p ><span>height:</span><span id="height"></span></p>
<p ><span>innerwidth:</span><span id="innerwidth"></span></p>
<p ><span>innerheight:</span><span id="innerheight"></span></p>
<p ><span>outwidth:</span><span id="outwidth"></span></p>
<p ><span>outheight:</span><span id="outheight"></span></p>
<script src="jquery-3.1.1.min.js"></script>
<script type="text/javascript">
    $(function () {
        var width = $("#width"),
            height = $("#height"),
            innerwidht = $("#innerwidth"),
            innerheight = $("#innerheight"),
            outwidth = $("#outwidth"),
            outheight = $("#outheight");
        var box_width = $("#box").width(),//盒子模型中裏面content的css設置的寬度（不包括padding和margin）
            box_height = $("#box").height(),//盒子模型中裏面content的css設置的高度（不包括padding和margin）
            box_innerwidth = $("#box").innerWidth(),//盒子模型中裏面content的css設置的寬度加上padding（包括padding）
            box_innerheight = $("#box").innerHeight(),//盒子模型中裏面content的css設置的高度加上padding（包括padding）
            box_outwidth = $("#box").outerWidth(),//盒子模型中裏面content的css設置的寬度加上padding（包括padding和邊框）
            box_outerheight = $("#box").outerHeight();//盒子模型中裏面content的css設置的高度加上padding（包括padding和邊框）
        width.text(box_width);
        height.text(box_height);
        innerwidht.text(box_innerwidth);
        innerheight.text(box_innerheight);
        outwidth.text(box_outwidth);
        outheight.text(box_outerheight);
    })
</script>

box的css樣式：

*{
    margin: 0;
    padding: 0;
}
.box{
    width: 500px;
    height: 600px;
    background-color: #0d3349;
    border:2px solid #0db50c;
    padding: 10px;
    margin: 20px;
}

運行結果：

width:500

height:600

innerwidth:520

innerheight:620

outwidth:524

outheight:624

由這個結果可以得知，

width和height的結果值就是box的css的width和height的值;

而innerwidth和innerheight的結果則是box盒子的css的width和height加上paddind值，即innerwidth=500+10*2=520,innerheight=500+10*2=520;

而outerwidth和outerheight的值則是css的width和height再加上padding和border,即outerwidth=500+10*2+2*2=524,outerheight=500+10*2+2*2=524;

總結：

width()//盒子模型中裏面content的css設置的寬度（不包括padding和margin）

height()//盒子模型中裏面content的css設置的高度（不包括padding和margin）

innerWidth()//盒子模型中裏面content的css設置的寬度加上padding（包括padding）

innerHeight()//盒子模型中裏面content的css設置的高度加上padding（包括padding）

outerWidth(),//盒子模型中裏面content的css設置的寬度加上padding（包括padding和邊框）

outerHeight()//盒子模型中裏面content的css設置的高度加上padding（包括padding和邊框）