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:500height:600innerwidth:520innerheight:620outwidth:524outheight: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和边框）