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

最新推荐文章于 2025-06-25 15:50:27 发布

原创最新推荐文章于 2025-06-25 15:50:27 发布 · 8.7k 阅读

32 ·

CC 4.0 BY-SA版权

css 专栏收录该内容

19 篇文章

订阅专栏

本文详细讲解了CSS中盒子模型的概念，包括标准盒子模型和border-box模型。通过实例演示了padding和border如何影响元素的实际占用空间，并介绍了使用border-box模型的优势，尤其是在自适应网页设计中的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

步骤阅读

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