css的两种盒模型（标准盒模型与怪异盒模型）_标准盒模型和c3盒模型颜色

作者：从前慢现在也慢 | 2024-05-27 09:07:43

踩

标准盒模型和c3盒模型颜色

css的两种盒模型（标准盒模型与怪异盒模型（不算IE哦））

标准盒模型	怪异盒模型
box-sizing: content-box;	box-sizing: border-box;
总宽度= width + margin(左右) + padding(左右) + border(左右)	总宽度 = width = margin(左右) + padding(左右) + border(左右) +内容宽度(content）
总高度= height+ margin(上下) + padding(上下) + border(上下)	总高度 = height= margin(上下) + padding(上下) + border(上下) +内容高度(content）

标准盒模型

可以运行康康

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>标准盒模型</title>
</head>
<style>
  .main{
    border: 5px solid black;
    display: inline-block;  //将元素显示为块级元素,效果更明显一点
    background-color: #53802a;
  }
  .box{
    //box-sizing: content-box;  //默认标准盒模型
    display: inline-block;  //将元素显示为块级元素,效果更明显一点
    width: 200px;
    height: 200px;
    border: 10px solid black;
    padding: 20px;
    margin: 20px;
    background-color: red;
  }
</style>
<body>
  <div class="main">
    <div class="box"></div>
  </div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

上面的逻辑不复杂，外层div没有设置宽高，包裹住内层div，完全由内层div把整个盒子撑大。然后我们来看效果：

在这里插入图片描述
这里我们看到，内层div的宽高都是260，可是宽高都是设置的200啊？

再看看这个
在这里插入图片描述
在这张图中，我们发现我们设置的200*200出现在了最里面的那个蓝框中，与此同时我们可以发现在这个盒模型中除了我们设置的内容（content），还有margin（外边距）、border（边框）、padding（内边框）

margin(外边距) - 清除边框外的区域，外边距是透明的。
border(边框) - 围绕在内边距和内容外的边框。
padding(内边距) - 清除内容周围的区域，内边距是透明的。
content(内容) - 盒子的内容，显示文本和图像。
1
2
3
4

总结一下：在标准盒模型下
一个块的总宽度= width + margin(左右) + padding(左右) + border(左右)
一个块的总高度= height+ margin(上下) + padding(上下) + border(上下)

怪异盒模型

运行康康

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>怪异盒模型</title>
</head>
<style>
  .main{
    border: 5px solid black;
    display: inline-block; //将元素显示为块级元素,效果更明显一点
    background-color: #53802a;
  }
  .box{
    box-sizing: border-box;  //设置怪异盒模型
    display: inline-block; //将元素显示为块级元素,效果更明显一点
    width: 200px;
    height: 200px;
    border: 10px solid #000000;
    padding: 20px;
    margin: 20px;
    background-color: red;
  }
</style>
<body>
  <div class="main">
    <div class="box"></div>
  </div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

与上面的逻辑一样，只是我们给内层盒子设置了 “border-box” 。然后我们来看效果：在这里插入图片描述
这里我们看到，内层div的宽高都是200，和我们设置的宽高一样

再看看这个
在这里插入图片描述
在这张图中，我们发现我们设置的200*200是整体盒子的大小，与此同时我们可以发现在这个盒模型中包括了margin（外边距）、border（边框）、padding（内边框）、内容（content）

总结一下：在怪异盒模型下
一个块的总宽度 = width = margin(左右) + padding(左右) + border(左右) +内容宽度(content）
一个块的总高度 = height = margin(上下) + padding(上下) + border(上下) +内容高度(content）

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/从前慢现在也慢/article/detail/630859