Simonebox-sizing:border-box的用法详解
的有关信息介绍如下：
在CSS的盒子模型中，有两个重要的选项，box-sizing:content-box 和 box-sizing:border-box，content-box被称为正常盒子模型，border-box被称为怪异盒子模型
新建一个HTML文档，并定义一个块元素，CSS示例：
.normal{width: 100px; height:100px; background: blue; }
保存文件，预览效果，
再次加入一个DIV并在原有的CSS上复制一份，加入Padding属性，示例：
.normal-padding{
width: 100px;
height:100px;
background: blue;
/*加入padding属性*/
padding:10px;
}
保存以上内容，比较两个DIV的区别
再次复制normal-padding的CSS，并加入border属性，示例：
.normal-padding-border{
width: 100px;
height:100px;
background: blue;
/*加入padding属性*/
padding:10px;
/*加入border属性*/
border:10px solid red;
}
保存以上内容，比较三个DIV的不同：盒子元素模型，会随着padding和border元素的加入，而增加实际占用空间，
定义一个border-box的DIV，复制.normal-padding-border的CSS，并加入一个box-sizing:border-box属性，示例：
.border-box{
width: 100px;
height:100px;
background: blue;
/*加入padding属性*/
padding:10px;
/*加入border属性*/
border:10px solid red;
/*将盒子模型定义为boder-box*/
box-sizing:border-box;
}
最终，保存以上内容，比较四个盒子模型得出如下结论：border-box定义的盒子，不会随着padding和boder的加入而增大盒子的占用空间
