CSS盒子（Box）模型入门

无论您是CSS的新手还是经验丰富的老手，了解和理解box模型都很重要。让我们更好地了解它。

每个初学者都应该从基础开始。以CSS为例，基础是学习Box模型。在继续学习其他CSS概念之前，您应该首先掌握它!

盒子（Box）模型是CSS的基本元素。

它确实会让初学者感到困惑，所以现在是时候纠正错误了。在这里，您将了解box模型的所有基本元素以及它们是如何使用的。

在深入研究之前，每个人都需要了解web设计中的每个元素都是一个矩形框。您可能已经听过很多次了，但是这是每个开发人员都应该注意的一个重要概念。

现在，让我们来解释一下神秘的盒子模型!

盒子模型结构

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

Content (height and width).

Padding.

Border.

Margin.

这些是浏览器呈现框模型所需的所有元素。值得庆幸的是，有了CSS，我们可以单独地控制它们。让我们来看看。

在本文中，我们将使用以下代码并逐渐添加到其中。

HTML

<div class="box">Lorem ipsum dolor amet whatever woke cronut, 
farm-to-table church-key tousled edison bulb. </div>

CSS

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

The Content

Content非常清晰。它是具有特定宽度和高度的元素的内容。可以使用CSS属性的高度和宽度设置固定的高度和宽度，也可以由内容本身决定。

现在，有一件事让人有点困惑，那就是使用内联或块级元素。

使用内联和块级元素（Using Inline and Block Level Elements

）

为了刷新您的内存，内联元素和块元素之间的区别在于块元素占用了容器宽度的100%，而内联元素只占用了内容需要的空间量。

在使用内联元素时，不可能为该元素设置固定的宽度或高度，因为元素没有预先确定的宽度和高度(因为宽度和高度由内容决定)。这可以通过将元素转换为块元素来克服。

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

您还可以将元素转换为inline-block。当使用inline-block时，元素具有内联元素的行为(只占用内容的空间)，但是您可以像使用块元素那样操作它。

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

CSS

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

结果如下图：

The Padding

接下来，我们将在我们的框中添加一些填充。

padding定义了内容和框的边缘之间的空间。

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

CSS

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

结果如图:

在图像中，我们看到padding如何影响框的整体外观。框的内容和四边都有10px的空间。我们也可以向四面八方单独添加padding,使用padding-top padding-bottom,padding-left padding-right。

The Border

因为我们是从内到外，下一步就是定义border。border围绕着内容，您不必使用它，但它仍然存在。这意味着border的宽度为0。

现在我们添加一个边框。

CSS

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

The Margin

框模型的最后一个方面是margin。正如你们所知道的，margin是border外的空间。它是元素之间的空间。

在实际示例中演示这一点的最佳方式是向您展示两个元素是如何放置的，以及如何使用和不使用margin边距。

HTML

<div class=”box”></div>
<div class=”box”></div>

CSS

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

在这个例子中，我们看到，没有边距，两个元素是如何结合在一起的，它们之间没有空间。

现在，添加margin

CSS

.box {
  margin: 20px;
}

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

总结

恭喜，你终于完成了这篇文章!那么，我们学到了什么?

网页上的每个元素基本上都是一个框。

box模型的方面是content, padding, border, and margin.。

使用内联元素时，不能为该元素设置固定的宽度或高度，而使用块和内联块元素则可以。

希望这能帮助你学到一些新的东西或者刷新你的记忆。