1、新建一个HTML文档，并定义一个块元素，CSS示例：
.normal{width: 100px; height:100px; background: blue; }
2、保存文件，预览效果，
3、再次加入一个DIV并在原有的CSS上复制一份，加入Padding属性，示例：
.normal-padding{
width: 100px;
height:100px;
background: blue;
/*加入padding属性*/
padding:10px;
}
4、保存以上内容，比较两个DIV的区别
5、再次复制normal-padding的CSS，并加入border属性，示例：
.normal-padding-border{
width: 100px;
height:100px;
background: blue;
/*加入padding属性*/
padding:10px;
/*加入border属性*/
border:10px solid red;
}
6、保存以上内容，比较三个DIV的不同：盒子元素模型，会随着padding和border元素的加入，而增加实际占用空间，
7、定义一个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;
}
8、最终，保存以上内容，比较四个盒子模型得出如下结论：border-box定义的盒子，不会随着padding和boder的加入而增大盒子的占用空间
