1.盒模型

每一个布局元素都可以看成一个矩形盒子，我们把它想象为一个容器，当要进行布局时，浏览器渲染引擎会根据标准的css盒模型，将所有元素表示为一个矩形盒子。在默认情况下，每个盒子的边框是不可见的，所以我们不能直接看到每个盒子。
盒模型从内到外分别是：内容（content）、padding（内边距）、border（边框）、margin（外边距）
在这里插入图片描述

1-1.内容：content

实际内容，显示文本和图像，设置一个div的宽高是设置内容得宽高

1-2.内边距：padding

盒子内容和边框的间距。

padding:10px 20px ;/* 内边距：两个值时是：上下  左右；  四个值时是：上右下左*/

1-3.border：边框

就是盒子的本身，围绕内容的内边距的一条或多条线。由粗线、样式、颜色三部分组成。
padding:10px 20px ;/* 内边距：两个值时是：上下左右；四个值时是：上右下左*/

border: 10px solid red; /*边框：粗细 实线 颜色*/

1-4.margin：外边距

两个盒子之间的距离

1-5.代码演示

<style>
    .mydiv{
        width: 200px;
        height: 200px;
        padding: 20px;
    }
</style>
<body>
    <div class="mydiv">

    </div>
</body>

效果图：
在这里插入图片描述
这时，我们发现盒子的大小变成了240px。这是为什么呢？
这是因为在css中，盒子模型分为了一下两种：

W3C标准盒子模型
IE盒模型

2.- W3C标准盒子模型

在这里插入图片描述

盒子总宽度=width+padding(padding-left+padding-right)+border(border-left+border-right)+margin(margin-left+margin-right)
盒子总高度=width+padding(padding-left+padding-right)+border(border-left+border-right)+margin(margin-left+margin-right)

因此上面的例子，width和height只是内容的高、宽，没有包含padding/margin/border的值，因此240px=width+padding-left+padding-right=200px+20px+20px

3.IE盒模型

在这里插入图片描述
此时：
width=content+padding+border
height=content+padding+border

因此此的：
盒子总宽度=width+margin
盒子总高度=height+margin
IE盒模型的width/heigth 包含了padding和border的值。

4.box-sizing

定义了如何计算一个元素的总宽度和总高度

属性值：

content-box：默认值，height/width不包含padding、border与标准盒子模型一致
border-box：height/width包含padding、border与IE盒子模型一致
inherit：指定box-sizing值，从父元素继承

给上面的例子加上

<style>
    .mydiv{
        width: 200px;
        height: 200px;
        padding: 20px;
        box-sizing:border-box;
    }
</style>
<body>
    <div class="mydiv">

    </div>
</body>

此时盒子宽度就为200px

原文链接：https://blog.csdn.net/qq_50487248/article/details/127256235