CSS——盒子模型

在我学习CSS视频的时候，发现所有的元素都是由一个个的盒子模型包围着的，它们是我们使用CSS实现准确布局，处理元素排列的关键，因此今天就来写篇博客总结下。

盒子模型分为两种——块级盒子模型（Block box）和 内联盒子模型（Inlinebox）
为什么要这么区分呢，是因为这两种盒子模型会在页面流和元素之间的关系上表现出不同的行为

一个被定义成块级的（block）盒子会表现出以下行为:

1. 盒子会在内联的方向上扩展并占据父容器在该方向上的所有可用空间，在绝大数情况下意味着盒子会和父容器一样宽
2. 每个盒子都会换行
3. width 和 height 属性可以发挥作用
4. 内边距（padding）, 外边距（margin） 和 边框（border） 会将其他元素从当前盒子周围“推开”

除非特殊指定，诸如标题和段落默认情况下都是块级的盒子。

如果一个盒子对外显示为 inline，那么他会有以下行为

1. 盒子不会产生换行。
2. width 和 height 属性将不起作用。
3. 垂直方向的内边距、外边距以及边框会被应用但是不会把其他处于 inline 状态的盒子推开。
4. 水平方向的内边距、外边距以及边框会被应用而且也会把其他处于 inline 状态的盒子推开。

用做链接的 <a> 元素、 <span>、 <em> 以及 <strong>都是默认处于 inline 状态的。

我们弄清了两种不同的盒子模型之间的区别，那么盒子模型究竟是什么呢？

完整的 CSS 盒模型应用于块级盒子，内联盒子只使用盒模型中定义的部分内容。模型定义了盒的每个部分 —— margin, border, padding, and content —— 合在一起就可以创建我们在页面上看到的内容。

一个块级盒子模型由以下几部分组成

1. Content box: 这个区域是用来显示内容，大小可以通过设置 width 和 height.
2. Padding box: 包围在内容区域外部的空白区域； 大小通过 padding 相关属性设置。
3. Border box: 边框盒包裹内容和内边距。大小通过 border 相关属性设置。
4. Margin box: 这是最外面的区域，是盒子和其他元素之间的空白区域。大小通过 margin 相关属性设置。

外边距是盒子周围一圈看不到的空间。它会把其他元素从盒子旁边推开。

我们可以通过margin属性来控制元素的所有边距

例如：

.box {
  margin-top: -40px;
  margin-right: 30px;
  margin-bottom: 40px;
  margin-left: 4em;
}

<div class="container">
  <div class="box">改变我的外边距.</div>
</div>

边框是在边距和填充框之间绘制的，为边框设置样式时，有大量的属性可以使用——有四个边框，每个边框都有样式、宽度和颜色。

分别设置每边的宽度、颜色和样式，可以使用：

设置所有边的颜色、样式或宽度，请使用以下属性：

设置单边的颜色、样式或宽度，可以使用：

例如：

.container {
  border-top: 5px dotted green;
  border-right: 1px solid black;
  border-bottom: 20px double rgb(23,45,145);
}

.box {
  border: 1px solid #333333;
  border-top-style: dotted;
  border-right-width: 20px;
  border-bottom-color: hotpink;
}

<div class="container">
  <div class="box">改变我的边框.</div>
</div>

内边距

内边距位于边框和内容区域之间，应用于元素的任何背景都将显示在内边距后面，内边距通常用于将内容推离边框。

我们可以使用padding属性控制元素所有边

例如

.box {
  padding-top: 0;
  padding-right: 30px;
  padding-bottom: 40px;
  padding-left: 4em;
}

<div class="box">
    改变我的内边距.
</div>

关于盒子模型的总结就是这些了，欢迎小伙伴来斧正