css盒模型：入门

每个初学者都应该首先从基础开始。就 CSS 而言，基础知识是学习盒模型。在继续学习任何其他 CSS 概念之前，这是作为初学者应该掌握的。

盒模型是 CSS 的基本构建块。

它确实会引起初学者的混淆，所以现在是时候澄清一下了。在这里，本文将会介绍盒模型的所有基本元素以及它们是如何连接的。

在介绍之前，每个人都需要了解网页设计中的每个元素都是一个矩形框。你之前可能已经多次听说过这一点，但这是每个开发人员都应该了解的重要概念。

现在，来解释一下神秘的盒子模型！

盒子模型的结构

如上所述，盒模型的结构包括：

• Content(内容) - 盒子的内容，显示文本和图像。
• Padding(内边距) - 清除内容周围的区域，内边距是透明的。
• Border(边框) - 围绕在内边距和内容外的边框。
• Margin(外边距) - 清除边框外的区域，外边距是透明的。
  HTML

 <div class="box">
        css盒模型学习
 </div>

CSS

  .box {
            background-color: skyblue;
            color: #fff;
        }

Content

内容已经很清楚了。我们元素的内容具有特定的宽度和高度。固定高度和宽度可以使用 CSS 属性的高度和宽度设置，也可以由内容本身决定。

HTML 中的高度和宽度

现在，这里有点令人困惑的一件事是内联或块级元素的使用。

使用内联和块级元素

为了加深你的记忆，内联元素和块元素之间的区别在于块元素占据容器宽度的 100% ，而内联元素仅占用内容所需的空间量。

使用内联 元素时，无法为该元素设置固定的宽度或高度，因为该元素没有任何预定的宽度和高度（因为宽度和高度由内容决定）。这可以通过将元素转换为块元素来解决。

与内联元素不同，在使用块级元素时，您可以轻松地为其设置固定的宽度或高度。 由于默认情况下，块级元素占据容器宽度的 100%，我们可以通过设置固定宽度轻松覆盖它。

你还可以将元素转换为inline-block。使用 inline-block 时，元素具有inline 元素的行为（仅占用内容空间），但您可以像使用块元素一样操作它。

现在，当我们有一个块级元素时，我们可以给它一个宽度和高度。

  .box {
            height: 200px;
            width: 200px;
            background-color: skyblue;
            color: #fff;
        }

结果：

初始输出

Padding

接下来，将为的盒子添加一些内边距。Padding 定义了内容和框边缘之间的空间。

HTML 内边距

让我们看看它在的例子中的作用。

 .box {
            height: 200px;
            width: 200px;
            background-color: skyblue;
            color: #fff;
            padding: 10px;
        }

结果：

HTML 内边距

在图像中，可以看到填充如何影响框的整体外观。所有四个边的内容和框的边缘之间都有 10px 的空间。还可以使用padding-top、padding-bottom、padding-left、padding-right单独向每一边添加填充 。

Border

由于是由内而外的，下一步就是定义边界。边框围绕内容，你不必使用它，但它仍然存在。这只是意味着边框的宽度为零。

HTML 中的边框

现在，将为示例添加一个边框。

 .box {
            height: 200px;
            width: 200px;
            background-color: skyblue;
            color: #fff;
            padding: 10px;
            border: solid 3px black;
        }

HTML 中的边框示例

Margin

盒模型的最后一个方面是外边距。正如你所理解的那样，边距是边界外的空间。它是元素之间的空间。

HTML 中的外边距

在实际示例中演示这一点的最佳方法是展示两个元素是如何定位有外边距和无外边距的情况。

<div class="box"></div>
<div class="box"></div>

 .box {
            height: 200px;
            width: 200px;
            background-color: skyblue;
            color: #fff;
            padding: 10px;
            border: solid 3px black;
            margin: 0
        }

HTML 中的边距示例

在这个例子中，可以看到在没有边距的情况下，两个元素如何粘在一起并且它们之间没有空间。

现在，下面添加一些边距。

.box{
            margin: 20px;
        }

HTML 中的边距示例

现在，这看起来更好。在盒子之间增加了一些空间。还可以使用margin-top、margin-bottom、margin-left 或 margin-right在元素的每一侧单独添加空间 。

总结

你已经完成了这篇文章，恭喜！

所以我们学了什么？

1. 网页上的每个元素基本上都是一个盒子。
2. 盒模型的方面是内容、填充、边框和边距。
3. 使用内联元素时，无法为该元素设置固定的宽度或高度，而块和内联块元素则可以。

希望这有助于你学习新事物或加深你的记忆。