• 原文地址：：CSS Box Model Properties – Explained With Examples
• 原文作者：Joy Shaheb
• 译者：路条编程

今天我们将通过示例学习如何使用CSS 盒模型。这将帮助大家制作完美的网站，并教大家更准确地使用 box-sizing、margin、padding 和 border 属性。

我们还将看到这些属性的一些实际用例。让我们开始学习之旅吧

目录

• 为什么要学习 CSS 盒模型？
• CSS 盒模型图
• 填充属性
• 边框属性
• 外边距属性
• box-sizing属性。
• 内容框VS边框

涵盖的主题

为什么要学习 CSS 盒模型？

CSS 盒模型包含 box-sizing、padding 和 margin 属性。如果大家不使用它们，网站效果将如下所示

没有边距填充的网站

但是如果我们正确使用盒模型属性，我们的网站会是这样的

使用 Box Model 属性的网站

视觉上更吸引人，对吧？如果我们想使我们的网站具有准确的计算，例如上面的那个 那么这个话题非常适合您。了解 CSS 框模型是帮助您制作完美网站的众多方法之一。

本文将讨论如何使用这些属性：

• padding
• margin
• border
• box-sizing

如何使用 CSS 盒模型属性

让我们看一些可以使用 CSS box-model 属性的示例。我们将剖析上面显示的网站。

让我们仔细看看导航栏。我们可以注意到使用 padding 属性的示例与不使用的示例之间的区别：

使用填充属性的导航栏项目

现在让我们仔细看看页面中的内容部分以及按钮。同样，我们也会注意到不同之处——正确的使用了padding 属性。

上图为使用填充属性的内容部分

CSS 盒模型图

把 CSS 盒模型想象成一个洋葱。它有4 层：

• 第一层：内容
• 第二层：填充
• 第三层：边框
• 第四层：边距

第一个盒模型层：内容

在 HTML 中，一切都表现得像一个盒子。让我们插入一些带有小猫图像的内容。

上图为盒模型的第一层：内容

第二个盒子模型层：填充

CSS 盒模型的下一层是填充层。它像这样包装我们的内容

上图为盒模型的第二层：填充

第三个盒模型层：边框

CSS 盒模型的下一层是边框层。它像这样包装我们的内容+填充

上图黑色虚线是边框

第 4 个盒模型层：外边距

CSS 盒模型的下一个也是最后一层是外边距层。它像这样包裹我们的内容+填充+边框

上图灰色区域是外边距

好了，让我们看看这些属性在项目中是如何工作的吧。

如何设置项目

本教程适合所有人，包括初学者。如果您想编写代码，请按照以下步骤操作。

HTML

打开 VS Code 或http://Codepen.io并编写此代码 在正文标签内：

<div class="box-1"> Box-1 </div>

CSS

清除我们浏览器的默认样式

* {
  margin: 0px;
  padding: 0px;
  font-family: sans-serif;
}

现在，让我们设计我们的盒子容器

.box-1 {
  width: 300px;
  background-color: skyblue;
  font-size: 50px;
}

我们都准备好了，让我们开始编码之旅吧！?

填充属性

但首先，让我们讨论一下 padding 属性的实际用途。然后，我们将看到如何使用这个属性。

通常，我们使用填充在内容之间增加一些空间。看看这个导航栏

上图为使用填充属性的导航栏项目

这是给大家的另外一个例子——看看下面的内容，有两个按钮

上图为使用填充属性的内容部分

如何在 CSS 中使用 padding 属性

这是四个填充属性的简写：

• padding-top
• padding-right
• padding-bottom
• padding-left

上图为填充属性的简写示意

请记住，填充是在主要内容之外添加的空间：

上图为盒模型的第二层：填充

让我们为我们的内容添加一些填充。红色区域是填充

上图红色区域是填充

为了重新创建上面的效果，?在你的 CSS 中写下这段代码：

// 在 .box-1 的顶部、右侧、左侧、底部添加填充

.box-1{
   padding : 100px;
}

让我们打开我们的开发者控制台并转到计算部分：

上图为CSS Box 模型的计算结果

最中间是我们的内容，宽度为300 像素。看看我们的内容，我们在它周围添加了100px 的填充。

让我们尝试在内容的一侧（仅右侧）添加填充：

上图为padding-right 属性

为了重新创建上面的效果，?在 CSS 中写下这段代码：

.?box-1{
   padding: 0 100px 0 0;
}
// 或者可以使用下面的方式 
.box-1{
   padding-right: 100px;
}

现在，在您的开发者控制台上打开计算部分

CSS Box 模型计算结果

看 - 100px 的填充仅按照我们指定的方式添加到我们内容的右侧。

边界属性

在制作按钮时，我们通常会使用边框属性。这是一个 GIF 演示

上图为使用边框属性的按钮

注意，当我们将鼠标悬停在按钮上时，按钮周围会显示白色边框。

如何在 CSS 中使用边框属性

请记住，边框是在我们的主要内容 + 填充顶部添加的空间：

上图黑色虚线是边框

边框属性有三个关键输入：

• 边框大小
• 边框样式：实线/虚线/虚线
• 边框颜色

边框属性语法

上面列出了三种边框属性样式。在本例中，我们将使用虚线样式：

要重新创建上面的结果，请在 CSS 中编写以下代码：

.box-1 {
  width: 300px;
  font-size: 50px;
  padding: 50px;
  border: 10px dashed black;
}

打开我们的控制台，看看盒子模型的计算：

CSS 盒模型的计算结果

现在看上图?– 在我们的content + padding周围添加了一个 10px 的边框。

margin 属性

通常，我们使用margin属性在内容和桌面布局（大屏幕）上的主屏幕之间放置一些空白。看看这个GIF：

上图为网站添加边距

请注意，在上方网站的左右边缘添加了边距

这是 margin 属性用例的另一个示例 GIF ：

上图为网站添加外边距

如何在 CSS 中使用边距属性

这是 margin 属性的四个属性的简写：

• margin-top
• margin-right
• margin-bottom
• margin-left

margin 属性的简写

请记住，边距是在我们的主要内容 + 填充 + 边框之外添加的空间：

上图灰色区域是外边距

让我们为我们的内容添加一个外边距。由于此 GIF中的外边距变化，内容被推送：

内容因 margin 变化而被推送

要创建上面的效果，请在 CSS 中编写以下代码：

.box-1 {
  padding: 50px;
  border: 10px dashed black;
  
  margin: 50px;
}

我们可以再次检查计算结果：

CSS 盒模型计算结果

看，我们的 content + padding + border 周围都添加了 50px 的边距。

让我们尝试在内容的一侧（仅左侧）添加边距：

上图为左边距属性

要重新创建上述效果，请在 CSS 中编写此代码

.box-1 {
  padding: 50px;
  border: 10px dashed black;
  
  margin-left: 50px;
}

在控制台上，我们可以看到仅在左侧应用了50px 的边距

CSS 盒模型计算结果

休息一下 ！

到目前为止一切顺利——让我们休息一下！

Box-sizing 属性

这个属性定义了我们的边距、内边距和边框将如何计算的。有三种类型的计算方式（您可以称它们为值）：

• border-box
• padding-box
• content box

笔记：

我们不会讨论box-sizing: padding-box，因为只有 Firefox 支持它并且它不经常使用。

CSS中的content-box和border-box有什么区别？

边框和内容框的工作方式相同。看看这些图片：

上图为使用边界框值的框

上图为使用内容框值的框

那么，这里的主要区别是什么？当我们向盒子添加边距、边框或填充时，差异是显而易见的。

当我们使用默认值 box-sizing: content-box 时，它会在 box 外添加边距、内边距和边框，如下所示：

上图为在盒子外面应用填充效果

您也可以在此处查看计算：

使用内容框计算

这意味着事情可能会失控，我们会看到意想不到的计算结果。这意味着很难制作响应式网站。始终使用box-sizing:border-box属性。

但是当我们使用box-sizing:border-box属性时，它会在 box 内添加边距、内边距和边框，如下所示：

上图为在盒子内应用填充的效果

box-sizing:border-box 属性向我们展示了 HTML 元素的精确计算方式，这意味着该值非常适合制作响应式网站。

您也可以对这些值进行试验——只需按照以下代码进行操作：

* {
  box-sizing: border-box;
}
/* 或如下写法  */
* {
  box-sizing: content-box;
}

结论

恭喜大家，通过以上内容的学习，现在我们已经可以制作完美的网站了。不仅如此，当大家编写代码时，大家还可以弄清楚为什么内容行为异常。