如何仅使用CSS创建Box元素

每个初学者都应该首先从基础开始。 对于CSS，基础知识是学习盒模型。 在继续学习其他CSS概念之前，这是您应该首先掌握的概念！

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

确实会引起初学者开发人员的困惑，所以现在是时候打破记录了。 在这里，您将学习盒模型的所有基本元素以及它们如何连接。

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

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

盒子模型的结构

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

• 内容 （高度和宽度），
• 填充
• 边框
• 保证金 。

这些是浏览器呈现盒子模型所需的所有元素。 幸运的是，有了CSS，我们可以分别控制它们。 让我们看看如何。

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

的HTML

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

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

内容

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

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

使用内联和块级元素

为了刷新您的内存，内联元素和块元素之间的区别是， 块元素占据了容器宽度的100％ ，而内联元素仅占据了内容所需的空间量 。

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

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

您还可以将元素隐藏为inline-block 。 使用inline-block时，该元素具有inline元素的行为 （仅占用内容空间）， 但是您可以像对block元素一样进行操作 。

现在，当我们有一个块级元素时，我们可以为其指定宽度和高度。

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

结果是这样的：

填充

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

填充定义内容和框的边缘之间的空间。

让我们看看示例中的操作。

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

结果：

在图像中，我们看到了填充如何影响框的整体外观。 内容与框的所有四个边之间的距离为10px。 我们还可以分别使用padding-top，padding-bottom，padding-left，padding-right向每个侧面添加padding 。

边界

由于我们是从内而外进行的，因此下一步将是定义边界。 边框围绕内容，您不必使用它，但它仍然存在。 这仅表示边框的宽度为零。

现在，我们将为示例添加边框。

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

保证金

盒子模型的最后一个方面是边距。 ==众所周知，边界是边界外的空间。==是元素之间的空间。

在实际示例中证明这一点的最佳方法是向您展示如何定位两个元素的有无边距。

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

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

在此示例中，我们看到两个元素如何无间隙地粘在一起，并且它们之间没有空间。

现在，让我们增加一些余量。

.box {
  margin : 20px ;
}

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

摘要

恭喜，您已经完成了本文的结尾！ :)

所以我们学了什么？

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

希望这可以帮助您学习新知识或刷新您的记忆。

请继续关注，因为在下一篇文章中，我们将讨论另一个非常重要的属性，可以帮助您计算盒模型的宽度， 即box-sizing属性 。

谢谢阅读！

https://kolosek.com/css-box-model-for-beginners/

From: https://hackernoon.com/how-to-create-box-element-using-css-only-7mut3ytc