box-sizing:border-box的用法详解

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，复制.norma盟敢势袂l-padding-border的CSS，并加入一个box-sizi荏鱿胫协ng: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的加入而增大盒子的占用空间