CSS盒模型

今天的课程中学习到了CSS的重要模型——盒模型。我来浅浅表述一下我对于盒模型的理解。
盒子，顾名思义，就是用来装东西的容器，CSS的盒子用来装HTML的各种元素，它分为四个部分，由外向内分别是，盒子内部包含的东西即内容content、内容与盒子的距离即内边距padding、盒子本身的厚度边框border以及盒子和盒子之间的距离外边距margin。

CSS的盒子模型的分类

第一类

content-box 内容盒即内容就是盒子的边界
它的宽度就是内容的宽度

第二类

border-box 边框盒即边框才是盒子的边界
它的宽度就是内容宽度+内边距+边框
下面是图片示例

截屏2022-07-06 11.32.59.png

我们用代码的方式实现一下：首先创建两个盒子

  <div class="content-box">content box</div>
  <div class="border-box">border box</div>

随后为其增加一些样式便于区分

.content-box {
  margin: 25px;
  border: 5px solid red;
  padding: 15px;
  box-sizing: content-box;
  width:100px;
}
.border-box {
  margin: 25px;
  border: 5px solid red;
  padding: 15px;
  box-sizing: border-box;
  width:100px;
}

我们能得到如下效果的两个盒子

截屏2022-07-06 13.13.00.png

我们可以直观的发现他们的宽度是不一样的，为了验证我们的想法我们可以打开开发者工具

这张是content-box的效果

截屏2022-07-06 13.14.19.png

这张是border-box的效果

截屏2022-07-06 13.15.10.png

我们可以看到，同样设置宽度为100px，content-box仅仅计算内容的宽度，而border-box则让border+padding+content的宽度为100px。
在使用CSS盒子模型的时候，我认为border-box的逻辑更加符合我们的使用习惯。