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和边框）