CSS盒模型盒子尺寸问题

最新推荐文章于 2024-10-02 15:35:50 发布

Web阿成

最新推荐文章于 2024-10-02 15:35:50 发布

阅读量304

点赞数 5

文章标签： css 前端

本文链接：https://blog.csdn.net/a_strong_pig/article/details/134992577

版权

什么是盒模型

CSS盒模型分为用来放置内容的content区域，用来调整内容和边框距离的padding区域。用来限制盒子边界的border区域以及用于调整盒子之间距离的margin区域。现在去掉margin，只考虑盒子内部的尺寸问题。

我们先来制作一个盒子。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="box"></div>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 300px;
            height: 200px;
            background-color: aqua;
            padding: 20px;
            border: 20px solid red;
        }
    </style>
</body>
</html>

这里的width和height 仅仅指的是content区域的尺寸。盒子整体所占据的空间还要加上水平和垂直方向上两队的border和padding的值。也就是分别加上20*4 = 80px 最后盒子所占有的空间为380*280px 。

我们如何不借助其他属性制作一个空间为300✖️200的盒子呢？

由于我们的boder和padding占据了80px的空间，所以我们只能压缩我们的content区域，将宽度和高度重新设置为220✖️120px。

这样做出来的盒子就是占据空间为300✖️200的盒子了。

在CSS2的时代，我们也只能通过这种方式来设置我们的盒子整体大小。但是在CSS3更新了box-sizing属性后，一切变得简单起来了。

我们将width和height的值恢复回来，然后设置box-sizing：border-box；

    .box{
            width: 300px;
            height: 200px;
            background-color: aqua;
            padding: 20px;
            border: 20px solid red;
            box-sizing: border-box;
        }

我们会发现效果跟我们单独设置width和height的效果是一样的。

box-sizing:border-box;原理

box-sizing:border-box;其实这个属性是用来设置 width和height到底指的是哪个区域的值？他有两个可选值，一个是content-box，一个是border-box；content-box为默认值，也等同于我们不设置box-sizing这个属性。如果设置了border-box，width和height指的就是border以内的区域。也就是content+padding+border的尺寸为300*200；所以此时content区域的尺寸就自动计算为220*120了。