jquery中outerHeight()与height()的区别?
1、新建一个html文件，命名为test.html。
2、在test.html文件内，使用div标签创建一个模块，并设置其class为tediv，主要用于下面通过该class获得div对象。
3、在test.html文件内，使用css设置div的样式，设置它的宽度为100px，高度为100px，背景颜色为红色，内边距为5px。
4、在test.html文件内，使用button标签创建一个按钮，按钮名称为“获得高度”。
5、在test.html文件中，给button按钮绑定onclick点击事件，当按钮被点击时，执行testfun（）函数。
6、在js标签中，创建testfun()函数，在函数内，通过class(tediv)获得div对象，分别使用height()方法和outerHeight()获得div的高度，最后，使用alert()方法将高度输出来。
在浏览器打开test.html文件，点击按钮，查看获得的高度值。
在jQuery中，width()方法用于获得元素宽度；innerWidth()方法用于获得包括内边界（padding）的元素宽度，outerWidth()方法用于获得包括内边界(padding)和边框(border)的元素宽度，如果outerWidth()方法的参数为true则外边界(margin)也会被包括进..
jQuery中的.height()、.innerHeight()和.outerHeight()和W3C的盒模型相关的几个获取元素尺寸的方法。对应的宽度获取方法分别为.width()、.innerWidth()和.outerWidth()，在此不详述。
1. .height()
获取匹配元素集合中的第一个元素的当前计算高度值 或 设置每一个匹配元素的高度值（带一个参数）。
注意：1）.css('height')和.height()之间的区别是后者返回一个没有单位的数值（例如，400），前者是返回带有完整单位的字符串（例如，400px）。
2）.height()总是返回内容宽度,不管CSSbox-sizing属性值。.height('value')设置的容器宽度是根据CSSbox-sizing属性来定的, 将这个属性值改成border-box，将造成这个函数改变这个容器的outerHeight，而不是原来的内容高度。
2. .innerHeight()
为匹配的元素集合中获取第一个元素的当前计算高度值,包括padding，但是不包括border。
3. .outerHeight()
获取元素集合中第一个元素的当前计算高度值,包括padding，border和选择性的margin。返回一个整数（不包含“px”）表示的值 ，或如果在一个空集合上调用该方法，则会返回 null。
在.outerHeight()计算中总是包含padding-top ,padding-bottom 和 border-top，border-bottom ；如果includeMargin参数是true，那么margin (top 和 bottom)也会被包含。
标准浏览器下：
height:高度
innerHeight:高度＋补白
outerHeight:高度＋补白＋边框，参数为true时：高度＋补白＋边框＋边距
html代码：
<div class="width: 150px;height:20px;float: left;border: 2px solid red;margin: 10px;margin: 10px;padding: 10px;" id="test">jjjjj</div>
js代码：
alert($("#test").height());
alert($("#test").innerHeight());
alert($("#test").outerHeight());
alert($("#test").outerHeight(true));
结果：
在ie中的结果：17px，37px，41px，61px
在ff中的结果：20px，40px，44px，64px
html代码：
<div class="width: 150px;height: 41px;float: left;border: 2px solid red;margin: 10px;margin: 10px;padding: 10px;" id="test">jjjjj</div>
js代码：
alert($("#test").height());
alert($("#test").innerHeight());
alert($("#test").outerHeight());
alert($("#test").outerHeight(true));
结果：
在ie中的结果：17px，37px，41px，61px
在ff中的结果：41px，61px，65px，85px
html代码：
<div class="width: 150px;height: 42px;float: left;border: 2px solid red;margin: 10px;margin: 10px;padding: 10px;" id="test">jjjjj</div>
js代码：
alert($("#test").height());
alert($("#test").innerHeight());
alert($("#test").outerHeight());
alert($("#test").outerHeight(true));
结果：
在ie中的结果：18px，38px，42px，62px
在ff中的结果：42px，62px，66px，86px
html代码：
<div class="width: 150px;height: 60px;float: left;border: 2px solid red;margin: 10px;margin: 10px;padding: 10px;" id="test">jjjjj</div>
js代码：
alert($("#test").height());
alert($("#test").innerHeight());
alert($("#test").outerHeight());
alert($("#test").outerHeight(true));
结果：
在ie中的结果：36px，56px，60px，80px
在ff中的结果：60px，80px，84px，104px
结论：在ie中height包含border和padding并且height最小值为17px ，同理可得width，不过它最小值为15px
