当前位置:   article > 正文

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

标准盒模型和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)
  1. 标准盒模型

可以运行康康

<!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(上下)

  1. 怪异盒模型

运行康康

<!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
推荐阅读
相关标签
  

闽ICP备14008679号