网页上的每个HTML元素都可以视为一个框，在Web开发中，我们使用CSS设置样式和对齐方式。了解这些框的概念对于提高CSS技能很重要。

元素（框）由内容字段和其他属性（例如，填充，边框和边距）组成。这种结构称为CSS盒模型 ，在本文中，您将学习盒模型的工作原理。

盒子模型的结构

从盒子模型的角度来看，这就是网页中元素在盒子内的外观。根据盒模型，元素包含四个部分：

• 内容（元素本身）。
• 填充（内部空间）。
• 边界。
• 保证金（外层空间）。

每个框都有四个面：顶部，底部，左侧和右侧。因此，我们可以在每一侧分别或全部一起应用填充，边框和边距：

 padding:10px; //向所有边添加10px 
 padding-right:10px; //仅向右添加10px

现在，让我们更详细地了解它们。

内容

内容区域是元素本身，没有任何填充，边框或边距。考虑到我们有一个<p>带有一些文本的标签：

<p class="article">Text</p>
<style>
 .article {
 background: lightblue;
 }
</style>

浅蓝色字段是元素的内容区域。由于<p>标记是一个块级元素，它占用了页面的整个宽度。

元素还具有width 和height 属性。这些属性会根据内容的大小自动调整，除非我们定义它们：

.article {
 background: lightblue;
 width: 100px;
 height: 100px;
}

但是，如果内容太大，则给height元素提供一个固定值将导致溢出问题：

<p class="article">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

提示：最好不要为height元素赋予属性，但是如果需要的话，我们可以使用Overflow属性来解决此问题。

填充区域(padding)

内容之后的盒子模型的下一部分是padding区域。如果再次查看本文开头的图片，您将看到填充区域是内容和元素边框之间的字段。

我们给元素填充以在内容和边框之间创建一些空白。

没有填充的元素：

具有20px填充元素：

.article {
 background: lightblue;
 width: 100px;
 height: 100px;
 padding: 20px; 
}

重新计算宽度和高度

这是人们感到困惑的部分。我给元素的宽度和高度设置了100px，但是在声明padding属性后，盒子变大了。

因此，当我们检查元素时，我们看到内容的宽度和高度仍然为100px，但其实际宽度和高度为140px：

发生这种情况的原因是，根据盒模型，不仅内容而且填充和边框都被视为元素的一部分。因此，这就是为什么正确的计算应如下所示的原因：

实际宽度=左边框+左边框+宽度+右边框+右边框。

实际高度=边框顶部+填充顶部+高度+填充底部+边框底部

要么

您可以改用另一个CSS属性box-sizing。大小调整框使您可以选择省略填充和边框以进行计算。（我也建议您使用它。）

边框

从现实世界中我们知道，边界是某物或某处的终点线。盒子模型也一样。边框是元素的终点线。

该border属性的常用用法是一个缩写：

.article {
 border: 3px solid red; 
}

一次包含以下属性：

• border-width
• border-style （需要）
• border-color

定义border-width和border-color属性是可选的，但是如果没有属性，它们将无法工作border-style。

有关边界的更多信息，请参见此处。

边缘区域(margin)

边缘区域是盒子模型的最后一个空间。我们使用边距在元素之间创建空间：

<p class="article">Text</p>
<p class="article">Another Text</p>
<p class="article">Final Text</p>
<style>
 .article {
 background: lightblue;
 margin-bottom: 20px;
 }
</style>

这是他们无边距的样子：

摘要

盒子模型是CSS的基本组成部分之一，开发人员迟早必须学习它。

我希望阅读完我的文章后能对您有所了解。如有任何疑问，请随时提出。

感谢您的阅读。