css的两种盒模型（标准盒模型与怪异盒模型）

最新推荐文章于 2024-06-16 11:49:47 发布

黑巧巴

最新推荐文章于 2024-06-16 11:49:47 发布

阅读量509

点赞数

文章标签： css html

本文链接：https://blog.csdn.net/qiaobahei/article/details/107797439

版权

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>

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

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

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

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

总结一下：在标准盒模型下
一个块的总宽度= 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>

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

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

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