最简单的方式理解html和css中border-box如何防止撑大盒子

最新推荐文章于 2024-05-20 22:08:52 发布

weixin_50070528

最新推荐文章于 2024-05-20 22:08:52 发布

阅读量1.4k

点赞数 1

文章标签： css html 前端

本文链接：https://blog.csdn.net/weixin_50070528/article/details/125620503

版权

我们来上一组对比图：

两个图像的代码如下：

<style>
        .a1 {
            width: 200px;
            height: 200px;
            background-color: pink;

        }

        .a2 {
            width: 200px;
            height: 200px;
            background-color: pink;
            /* box-sizing: border-box; */
            padding: 10px;
            border: 5px solid red;
        }
    </style>
</head>

<body>
    <div class="a1">这是一个比较小的框</div>
    <div class="a2">这是一个比较大的框</div>
</body>

我们在代码中设置两个图像的width和height是一样的，然后唯一的不同就是比较大的框加上了border和padding，很明显撑大了盒子。

这个时候，我们添加box-sizing：border-box这段代码，得到如下：

  <style>
        .a1 {
            width: 200px;
            height: 200px;
            background-color: pink;

        }

        .a2 {
            width: 200px;
            height: 200px;
            background-color: pink;
            box-sizing: border-box;
            padding: 10px;
            border: 5px solid red;
        }
    </style>
</head>

<body>
    <div class="a1">这是一个比较小的框</div>
    <div class="a2">这是一个比较大的框</div>
</body>

图像变成了这个样子：