box-sizing是CSS3的box属性之一，遵循css的盒模型(Box model)原理
css的盒模型(Box model)分为两种，第一种是W3C的标准模型，另一种是IE的传统模型
他们都是对元素计算尺寸的模型，但是计算的方式不同
W3C的标准模型：
/*content height表示元素内容高度
* content width表示元素内容宽度
*/
/*元素空间尺寸*/
Element空间高度 = content height + padding + border + margin
Element 空间宽度 = content width + padding + border + margin
/*元素大小*/
Element Height = content height + padding + border
Element Width = content width + padding + border
IE的传统模型
/*content height包含了元素内容高度，内距宽度，边框宽度
* content width包含了元素内容宽度，内距宽度，边框宽度
*/
/*元素空间尺寸*/
Element空间高度 = content height + margin
Element空间宽度 = content width + margin
/*元素大小*/
Element Height = content height
Element width = content width
box-sizing
语法：content-box | border-box | inherit
取值说明
1、content-box:此值为其默认值，即让元素维持W3C的标准盒模型，也就是说元素的宽度/高度（width/height）等于元素边框宽度（border）加上元素内边距（padding）加上元素内容宽度/高度（content width/height）
2、border-box:此值让元素维持IE传统的盒模型（IE6以下版本），也就是说元素的宽度/高度（width/height）等于元素内容的宽度/高度（content width/height）。
3、inherit: 此值让元素继承父类的box-sizing属性值
浏览器的兼容情况：
Chrome/Opera/IE（IE8版本以上） 支持 box-sizing
FireFox 支持 -moz-box-sizing
Safari 支持 -webkit-box-sizing
栗子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box img{
width: 140px;
height: 140px;
padding: 10px;
border: 20px solid orange;
margin: 5px;
}
#content-box img{
box-sizing: content-box;
}
#border-box img{
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="box" id="content-box">
<img src="view.jpg"/></div>
<div class="box" id="border-box">
<img src="view.jpg"/></div>
</body>
</html>
结果图：
box-sizing.png
效果一的布局分析图
content-box.png
效果二的布局分析图
border-box.png
