曾经遇到过这样的问题，设定一个div，当给div设置padding的时候，发现整个div的宽高都发生了变化，这里就产生了一个疑惑，一个盒子的总体宽高到底是怎么去判断的呢？
经过查询得知，盒子宽高的判定模式一共有两种，分别为标准模式和怪异模式。
为了能更好的理解我们先设定一个div并给它设定样式：
1 #content1{ 2 width: 200px; 3 height: 200px; 4 border: 2px solid black; 5 margin: 20px; 6 padding: 20px; 7 }
一般情况下个盒子的宽高在一般情况下等于内容的宽高+边框的宽高+内边距的宽高+外边距的宽高
这就是标准模式下的盒子宽高判定
但在某些时候（ie6,7,8 下DOCTYPE缺失）盒子的宽高等于设定的宽高+外边距的宽高，这里的设定的宽高就等于内容的宽高+内边距的宽高+边框的宽高
这就是怪异模式下的盒子宽高判定
奥硕企业网站管理系统终身免费版精简版1.0 build 090625
下载
奥硕企业网站管理系统具有一下特色功能1、双语双模（中英文采用单独模板设计，可制作中英文不同样式的网站）2、在线编辑JS动态菜单支持下拉效果，同时生成中文，英文，静态3个JS菜单3、在线制作并调用FLASH展示动画4、自动生成缩略图，可以自由设置宽高5、图片批量加水印，可以自由设置字体，大小，样式，水印位置（同时支持文字或图片类型水印）6、强大的标签式数据调用，可以调用（新闻，产品，下载，招聘）支持
我们可以通过使用box-sizing属性来决定使用哪一种模式，
content-box : 将采用标准模式解析计算 ，
border-box: 将采用怪异模式解析计算；
通过怪异模式我们可以在不改变盒子整体宽高的情况下给其设定padding。
