box-sizing : content-box || border-box || inherit
1、content-box:此值为其默认值。元素的宽度/高度（width/height）等于元素边框宽度（border）加上元素内边距（padding）加上元素内容宽度/高度（content width/height）即：Element Width/Height = border+padding+content width/height。
2、border-box:元素的宽度/高度等于元素内容的宽度/高度。（从上面Box Model介绍可知，我们这里的content width/height包含了元素的border,padding,内容的width/height。此处的内容宽度/高度=width/height-border-padding）。
.innerWidth(); .outerWidth(); .width(); .css(width) || .innerHeight(); .outerHeight(); .height(); .css(height)
1、.innerWidth()/.innerHeight()为匹配的元素集合中获取第一个元素的当前计算宽度/高度值,包括padding，但是不包括border。这个方法不适用于window 和 document对象，可以使用.width() 代替。
2、.outerWidth([includeMargin])/.outerHeight([includeMargin])获取元素集合中第一个元素的当前计算宽度/高度值,包括padding，border和选择性的margin。返回一个整数（不包含“px”）表示的值 ，或如果在一个空集合上调用该方法，则会返回 null。如果 includeMargin 省略或者false，padding 和 border会被包含在计算中；如果true，margin也会被包含在计算中 。这个方法不适用于window 和 document对象，可以使用.width()代替。
3、.css(width) 和 .width()之间的区别是后者返回一个没有单位的数值（例如，400），前者是返回带有完整单位的字符串（例如，400px）。当一个元素的宽度需要数学计算的时候推荐使用.width() 方法 。.css(height) 和 .height()之间的区别同理。
4、.width( value )/.height( value )给每个匹配的元素设置CSS宽度/高度。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>盒模型</title>
<style>
*{padding:0;margin:0;}
div{
width:500px;height:200px;
margin:20px;padding:10px;border:2px solid #666;
box-sizing:border-box;
}
</style>
<script src="jquery.min.js"></script>
</head>
<body>
<div id="box">
box-sizing:border-box；以上结论适用于Ie8+,Firefox,Chrome
</div>
<script>
var $box = $('#box');
console.log('box-innerWidth:' + $box.innerWidth()); //box-innerWidth:496
console.log('box-width:' + $box.width()); //box-width:476
console.log('box-outerWidth:' + $box.outerWidth()); //box-outerWidth:500
console.log('box-cssWidth:' + $box.css('width')); //box-cssWidth:500px
console.log('box-innerHeight:' + $box.innerHeight()); //box-innerHeight:196
console.log('box-height:' + $box.height()); //box-height:176
console.log('box-outerHeight:' + $box.outerHeight()); //box-outerHeight:200
console.log('box-cssHeight:' + $box.css('height')); //box-cssHeight:200px
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>盒模型</title>
<style>
*{padding:0;margin:0;}
div{
width:500px;height:200px;
margin:20px;padding:10px;border:2px solid #666;
box-sizing:content-box;
}
</style>
<script src="jquery.min.js"></script>
</head>
<body>
<div id="box">
box-sizing:content-box；以上结论适用于Ie8+,Firefox,Chrome
</div>
<script>
var $box = $('#box');
console.log('box-innerWidth:' + $box.innerWidth()); //box-innerWidth:520
console.log('box-width:' + $box.width()); //box-width:500
console.log('box-outerWidth:' + $box.outerWidth()); //box-outerWidth:524
console.log('box-cssWidth:' + $box.css('width')); //box-cssWidth:500px
console.log('box-innerHeight:' + $box.innerHeight()); //box-innerHeight:220
console.log('box-height:' + $box.height()); //box-height:200
console.log('box-outerHeight:' + $box.outerHeight()); //box-outerHeight:224
console.log('box-cssHeight:' + $box.css('height')); //box-cssHeight:200px
</script>
</body>
</html>
网上类似博客：
box-sizing(CSS3的box属性)：http://blog.csdn.net/looksun/article/details/8755610
css3盒模型display:box详解：http://www.css119.com/archives/1605
display属性详解：http://www.divcss5.com/css3book/properties/layout/display.htm
Javascript/Jquery获取浏览器和屏幕各种高度宽度：http://www.cnblogs.com/EricaMIN1987_IT/p/3593431.html
尖刀出鞘的display常用属性及css盒模型深入研究：http://www.cnblogs.com/tugenhua0707/p/4161716.html
IE9不支持compact | box | inline-box属性值