为什么要用box-sizing: border-box？一般什么时候用？

原文链接： https://jingyan.baidu.com/article/a3aad71a081a4cb1fb009690.html

1. 1

   新建一个HTML文档，并定义一个块元素，CSS示例：

   .normal{width: 100px; height:100px; background: blue; }

   步骤阅读
2. 2

   保存文件，预览效果，

   步骤阅读
3. 3

   再次加入一个DIV并在原有的CSS上复制一份，加入Padding属性，示例：

   .normal-padding{

               width: 100px;

               height:100px;

               background: blue;

               /*加入padding属性*/

               padding:10px;

           }

   步骤阅读
4. 4

   保存以上内容，比较两个DIV的区别

   步骤阅读
5. 5

   再次复制normal-padding的CSS，并加入border属性，示例：

   .normal-padding-border{

               width: 100px;

               height:100px;

               background: blue;

               /*加入padding属性*/

               padding:10px;

               /*加入border属性*/

               border:10px solid red;

           }

   步骤阅读
6. 6

   保存以上内容，比较三个DIV的不同：盒子元素模型，会随着padding和border元素的加入，而增加实际占用空间，

   步骤阅读
7. 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. 8

   最终，保存以上内容，比较四个盒子模型得出如下结论：border-box定义的盒子，不会随着padding和boder的加入而增大盒子的占用空间

   步骤阅读

一般在写页面的时候用这个属性就不会再考虑边框和内边距会改变整体所占宽度，即不用再根据盒子模型再去计算，省去很多麻烦，一般在做自适应的网页设计的时候用，用这个属性网页结构才不会被破坏。