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的加入而增大盒子的占用空间
