当设置为box-sizing:content-box时，将采用标准模式解析计算（默认模式）；
当设置为box-sizing:border-box时，将采用怪异模式解析计算；
2、盒模型
在网页中，一个元素占有空间的大小由几个部分构成，其中包括元素的内容（content），
元素的内边距（padding），元素的边框（border），元素的外边距（margin）四个部分，
这就是盒子模型。
在标准模式下的盒模型如下图所示，盒子总宽度/高度=width/height+padding+border+margin
3、怪异盒模型
在怪异模式下，盒子的总宽度和高度是包含内边距padding和边框border宽度在内的，盒子总宽度/高度=width/height + margin = 内容区宽度/高度 + padding + border + margin
一个网页是被分解成若干区块来控制页面框架的，当然这些区块都是为了放置网页不同元素服务的！
基于div+css技术的“盒子模型”的出现大大代替了传统的table表格嵌套。你可以把“盒子模型”看成是网页的一个区块，
也可以把它看成是大区快中的一个“区块元素”。既然是区块，“盒子模型”自然就会占据一定的空间。
到底我的区块要占多少空间？区块边缘的样式如何定义？区块与其他区块之间的距离怎么样。。。诸如此类的问题就
引出了今天我们的话题--------【盒子模型的技术，也即“相框模型的技术”】
盒子模型的组成部分：content (内容)、padding (间隙)、border(边框)、margin(间隔)。如图所示：
打个比方：相框，或者说是盒子，都有一些参数：比如相框中相片的所占空间（content）、相片与相框的距离
(padding)、相框本身的宽度(border)、墙上两个相框之间的距离(margin).这下大家应该比较熟悉了吧！！
小结一下：盒子模型的的高度（即相框模型的宽度）=content+padding+border+margin
这几个参数可是说是“盒子模型”的基本属性名，我们可以通过css技术给这些属性定义不同的属性值，就可以达到丰富
的效果了！
content作为网页内容，是由height、width等属性值对内容单独定义的。作为框架部分，下面列举padding、border、
margin的部分常用属性，以做参考：
padding padding-Bottom padding-left padding-right padding-Top
border border-bottom border-bottom-color border-bottom-style border-bottom-width 等等
margin margin-bottom margin-left margin-right margin-top
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
<!--
*{ margin:0 padding:0}
#wrap{ width:290px height:290px background-color:#CC9
padding:10px 10px}
#div1{ width:100px height:100px background-color:#C3C}
-->
</style>
</head>
<body>
<div id="wrap">
<div id="div1"></div>
</div>
</body>
</html>
大盒子设置内边距 ，代码如上，效果如下：
