CSS 盒模型属性介绍及示例应用
译者：路条编程
今天我们将通过示例学习如何使用CSS 盒模型。这将帮助大家制作完美的网站，并教大家更准确地使用 box-sizing、margin、padding 和 border 属性。
我们还将看到这些属性的一些实际用例。让我们开始学习之旅吧
目录
为什么要学习 CSS 盒模型？
CSS 盒模型图
填充属性
边框属性
外边距属性
box-sizing属性。
内容框VS边框
涵盖的主题
为什么要学习 CSS 盒模型？
CSS 盒模型包含 box-sizing、padding 和 margin 属性。如果大家不使用它们，网站效果将如下所示
没有边距填充的网站
但是如果我们正确使用盒模型属性，我们的网站会是这样的
使用 Box Model 属性的网站
视觉上更吸引人，对吧？如果我们想使我们的网站具有准确的计算，例如上面的那个
本文将讨论如何使用这些属性：
padding
margin
border
box-sizing
如何使用 CSS 盒模型属性
让我们看一些可以使用 CSS box-model 属性的示例。我们将剖析上面显示的网站。
让我们仔细看看导航栏。我们可以注意到使用 padding 属性的示例与不使用的示例之间的区别：
使用填充属性的导航栏项目
现在让我们仔细看看页面中的内容部分以及按钮。同样，我们也会注意到不同之处——正确的使用了padding 属性。
上图为使用填充属性的内容部分
CSS 盒模型图
把 CSS 盒模型想象成一个洋葱。它有4 层：
第一层：内容
第二层：填充
第三层：边框
第四层：边距
第一个盒模型层：内容
在 HTML 中，一切都表现得像一个盒子。让我们插入一些带有小猫图像的内容。
上图为盒模型的第一层：内容
第二个盒子模型层：填充
CSS 盒模型的下一层是填充层。它像这样包装我们的内容
上图为盒模型的第二层：填充
第三个盒模型层：边框
CSS 盒模型的下一层是边框层。它像这样包装我们的内容+填充
上图黑色虚线是边框
第 4 个盒模型层：外边距
CSS 盒模型的下一个也是最后一层是外边距层。它像这样包裹我们的内容+填充+边框
上图灰色区域是外边距
好了，让我们看看这些属性在项目中是如何工作的吧。
如何设置项目
本教程适合所有人，包括初学者。如果您想编写代码，请按照以下步骤操作。
HTML
打开 VS Code 或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
上图为填充属性的简写示意
请记住，填充是在主要内容之外添加的空间：
上图为盒模型的第二层：填充
让我们为我们的内容添加一些填充。红色区域是填充
上图红色区域是填充
为了重新创建上面的效果，
// 在 .box-1 的顶部、右侧、左侧、底部添加填充
.box-1{
padding : 100px;
}
让我们打开我们的开发者控制台并转到计算部分：
上图为CSS Box 模型的计算结果
最中间是我们的内容，宽度为300 像素。看看我们的内容，我们在它周围添加了100px 的填充。
让我们尝试在内容的一侧（仅右侧）添加填充：
上图为padding-right 属性
为了重新创建上面的效果，
.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 盒模型的计算结果
现在看上图
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;}
结论
恭喜大家，通过以上内容的学习，现在我们已经可以制作完美的网站了。不仅如此，当大家编写代码时，大家还可以弄清楚为什么内容行为异常。