如何在 CSS 中使用盒模型

笔记首页 >> 教程系列 >> 如何在 CSS 中使用盒模型

作者选择了技术多样性基金来接受捐赠，作为Write for DOnations计划的一部分。

介绍

该盒模型是规则集浏览器的用途来确定元素的大小，以及它如何与其他元素交互。HTML 元素的内容以及一些 CSS 属性都有助于浏览器用于将 HTML 和 CSS 代码转换为最终呈现的网页的计算。了解盒子模型的工作原理以及如何有效地操作它可能是对齐良好的设计与具有不需要的水平滚动和内容之间的额外空间的网页之间的区别。了解盒模型的工作原理将帮助您更有效地编写 CSS 并找到解决浏览器中呈现问题的方法。

注意：大多数 HTML 元素属于两类 box 之一，即inline或block。一个<span>元素是一个通用的内联元素，因为它与文本内容内嵌停留。的<div>元件，是一种通用的块状元件。本教程将重点介绍盒模型如何影响块元素，因为它是盒模型规则集的最广泛用途。

请注意，对display属性的更改可能会导致框模型以本教程目标之外的方式运行的方式发生更改，尤其是在使用表格、Flexbox 和 CSS 网格时。

在本教程中，您将使用margin，padding，border，width，和height属性，这是主要的属性框模型的用途。您还将使用这些box-sizing属性来了解如何更改盒模型。最后，您将使用浏览器的开发工具来检查盒模型。

先决条件

保存在本地计算机上的 HTML 文件index.html，您可以从文本编辑器和所选的 Web 浏览器访问该文件。要开始使用，请查看我们的如何设置 HTML 项目教程，并按照如何使用和理解 HTML 元素获取有关如何在浏览器中查看 HTML 的说明。如果您不熟悉 HTML，请尝试使用 HTML系列构建网站的方法。
熟悉浏览器的开发工具。本教程将使用Firefox 开发人员工具。如果您使用的是 Google Chrome，这篇 SparkBox 文章是对其开发工具的有用介绍。

设置 HTML 和开发者工具

在本节中，您将设置 HTML 库以在整个教程中使用。您还将访问浏览器的开发人员工具并开始使用它们来帮助识别构成盒模型的属性。

首先，index.html在文本编辑器中打开并将以下 HTML 添加到文件中：

索引.html

<!doctype html>
<html>
    <head>
        <title>Box Model</title>
        <link href="styles.css" rel="stylesheet" />
    </head>
    <body>
    </body>
</html>

HTMLstyles.css在<link />标记中包含对文件的引用。继续创建该文件；您将在下一节开始编辑它。

接下来，您将需要内容来应用样式并开始使用盒模型。在下一个代码块中，在<body>标记中添加突出显示的代码。像这样突出显示的代码将在整个教程中用于识别代码的更改和添加。对于内容，创建两个<div>元素并用以下两句引自Lewis Carol 的Alice’s Adventures in Wonderland 来填充它们：

索引.html

...
<body>
    <div>
        Alice had begun to think that very few things indeed were really impossible.
    </div>

    <div>
        "Begin at the beginning," the King said gravely, "and go on till you come to the end: then stop."
    </div>
</body>
...

接下来，index.html在您选择的浏览器中打开并打开浏览器的开发人员工具。这通常可以通过右键单击页面并选择Inspect或Inspect Element 来完成。打开开发人员工具后，检查第一个<div>元素。在 Firefox 和 Chrome 中，都可以看到盒模型的可视化图表。以下是您可以在 Firefox 开发人员工具中找到的内容：

框模型图，其中定义了从最外到最内的框作为边距、边框和填充，全部设置为 0，计算的宽度和高度为 970 x 19。

看着从Firefox盒模型的可视化更近，组成盒模型的性能示从中心向外的width，height，padding，border，和margin。这五个属性构成了盒模型并提供了元素的尺寸特征。当您使用每个属性并在浏览器中刷新您的更改时，请务必保持开发人员工具打开以引用您元素的此盒模型可视化。

在本节中，您为教程设置了 HTML，打开了浏览器的开发人员工具，并访问了盒模型可视化指南。在下一节中，您将开始为border属性编写 CSS ，这将为您的<div>元素提供盒模型的初始视觉样式。

使用`border`属性来可视化容器

现在您已经设置了 HTML，您将开始应用盒模型的border属性，从属性开始。在本节中，您将使用该border属性创建<div>元素的视觉轮廓，并查看该属性如何影响盒模型。

该border物业是所谓的速记属性，因为它是三个不同属性的组合：border-width，border-style，和border-color。此外，有更多的border特性，其允许指定侧，像border-right，它的功能，如border，是的简写组合border-right-width，border-right-style和border-right-color。

border-width, border-style, 和border-color也作为它们border-top, border-right,border-bottom和border-left对应项的简写，从上到右顺时针应用样式，然后是底部，最后是左侧。例如，border-width: 10px 2px 8px 4px;将10px边框应用于顶部，2px右侧8px边框，底部4px边框和边框左侧。

styles.css在文本编辑器中打开，为div元素编写类型选择器，然后添加border属性。对于值，顺序并不重要，但常见的顺序是宽度、样式和颜色。考虑到这一点，将border属性的值设置为1px solid red：

样式文件

div {
    border: 1px solid red;
}

保存更改，styles.css然后index.html在浏览器中打开。<div>元素的内容将被框周边的细红线紧紧包裹。在两行文本之间，会有一个较粗的边框。当来自两个不同元素的边框并排设置时会发生这种情况，使边框的视觉大小加倍。更改在您的浏览器中将如下所示：

两个宽矩形，每个矩形都有黑色衬线字体的文本和紧靠文本的细红色边框。

随着index.html在浏览器中打开，返回到浏览器的开发工具和检查两个中的一个<div>元素。返回到显示元素框模型的开发人员工具中的视图。在最里面的盒子中是元素的宽度乘高度，然后是填充，最后是边框，注意1在其盒子的每一侧都有。请参阅来自 Firefox 开发人员工具的以下图像：

框模型图，其中定义了从最外到最内的框，边距设置为 0，边框设置为 1，填充设置为 0，并且计算出的宽度和高度为 970 x 19。

Firefox 窗口设置为986px宽，盒模型图的内框宽度为 968 x 19，但在图之后是另一个值 970 x 21。这是计算出的宽度和高度，即最终像素尺寸浏览器呈现，结合height，width，border，和padding属性值在一起。这种尺寸差异在任一维度上都增加了两个，这与边框添加到高度和宽度的尺寸一致。

在本节中，您在元素border上创建了一个，<div>并了解了这个属性如何影响这些元素的计算尺寸。在下一部分中，您将通过在边框和具有padding属性的文本之间应用内部间距来扩展您的样式。

使用`padding`属性在容器内创建空间

您border在上一节中对属性的使用为框提供了一个视觉边界，但它与文本非常接近。接下来，您将使用该padding属性在框内部添加空间，在文本和框边框之间提供空间。

与border属性类似，padding属性也是速记属性。但是，padding仅是边的简写，例如padding-bottom属性。使用单个值时，所有边都将应用相同的值。例如，对所有边padding: 20px;应用20px填充。当使用两个值时，第一个值应用于顶部和底部，而第二个值应用于左侧和右侧。例如，以下内容padding: 20px 40px;将20px填充到框的顶部和底部，而40px填充在左侧和右侧。这会进展到三个值，依次是顶部、左侧和右侧，然后是底部。每边有四个值，分别表示为顶部、右侧、底部和左侧。

styles.css在文本编辑器中打开您的文件，然后在border属性之后添加padding一个值为30px 60px. 在值之间放置一个空格很重要，因为这是 CSS 在多个值之间划定的方式。

样式文件

div {
    border: 1px solid red;
    padding: 30px 60px;
}

保存对styles.css文件的最新更改，然后index.html在浏览器中返回到文件并刷新页面。这两个元素的高度增加了，红色框中文本的位置向下和向右移动，文本下方有额外的空间。有关浏览器预期呈现的内容，请参见下图：

两个宽矩形，每个矩形都有黑色衬线字体的文本和一个细的红色边框，文本和边框之间有空间。

再次返回浏览器开发人员工具并检查两个框之一。盒子模型图现在显示了填充，盒子的顶部和底部是 30，盒子的左边和右边是 60。

盒模型图，图的填充区域显示顶部和底部的值为 30，左侧和右侧的值为 60。

通过使用元素padding上的属性在<div>边框和文本之间提供视觉空间，您扩展了框模型的复杂性。浏览器开发人员工具中的盒模型视觉指南展示了这些变化及其对显示的维度值的影响。接下来，您将使用width和height属性来查看它们如何进一步影响盒模型以及这两个属性如何被属性更改padding。

使用`width`和`height`属性来限制尺寸宽度

本节将重点介绍使用定义width和height属性值来强制<div>元素的尺寸以及如何在盒模型中处理这些属性。本节将对width和height值使用像素单位（通常称为固定尺寸）以及百分比单位（称为流体尺寸）。不像前两个属性，width并且height不是速记。这些应用定义的值。但是，使用 CSS 设置维度值会导致可疑的效果，这可以追溯到语言的早期规范。在width和height面前的可见内容的设定尺寸padding和border值被应用。这会导致盒子比预期的要大。

要尝试盒模型的这一方面，请返回到styles.css文本编辑器中的文件并添加width值为的属性250px：

样式文件

div {
    ...
    width: 250px;
}

将更改保存到styles.css，切换到浏览器，然后刷新index.html。当页面重新加载时，内容会变得更窄并被包装成多行文本。请参阅下图，了解它在浏览器中的显示方式：

两个窄矩形，每个矩形都有黑色衬线字体的文本和一个细的红色边框，文本和边框之间有空间。

打开浏览器开发人员工具并检查两个<div>元素之一。框的中心是width属性定义的值，为 250 x 57。但是，正如 Firefox 框模型图中的图像所示，元素的全宽不是 250，而是 372。

框模型图，框中心的高度和宽度值设置为蓝色，宽度为 250，下方的黑色无衬线文本显示总宽度为 372。

计算出的宽度由确定width，它设置内容的宽度，然后是右padding值和左值的大小，然后是右border-width值和左值。框模型的这种构造是在 CSS 开发的早期设计的，它要求开发人员记住width和height属性定义内容的尺寸，而不是框。这是默认行为，理解它有助于将来调试问题。

不使用固定像素值作为宽度，而是使用流动百分比作为宽度100%。默认情况下，<div>元素会扩展全宽，但在扩展默认全宽和声明width值为之间存在差异100%。在您的中styles.css，更改250px为100%：

样式文件

div {
    ...
    width: 100%;
}

保存styles.css文件并index.html在浏览器中刷新。该<div>元素现在延伸超出视口的边缘，无论窗口的大小。发生的情况与 250 变为 372 时发生的情况相同：元素的全宽现在100%是可用宽度加上使用padding和border值创建的 122 像素。

返回到您的styles.css文件并首先将width值返回到250px。接下来，添加一个height属性并添加一个您知道将小于内容高度的值。40px这个内容就足够了：

样式文件

div {
    ...
    width: 250px;
    height: 40px;
}

将这些更改保存到styles.css文件并index.html在浏览器中刷新。填充现在看起来好像底部更小，而实际上浏览器正面临一个两难境地：明确设置了高度，但内容大于容器。浏览器遵循的规则使用定义的height值，如果有更长的内容，它将扩展到框外。

打开浏览器开发人员工具，检查其中一个<div>元素，该元素将在渲染视图中突出显示。将鼠标悬停在padding盒模型图的区域上以突出显示元素的填充区域。文本内容将进入填充区域。请参阅下图，了解您将在浏览器中找到的内容：

一个带有黑色衬线文本和红色细边框的框，文本和边框之间的间距突出显示为紫色，文本进入紫色区域的底部。

在内容长度可变的情况下，最好避免定义height值，而是让内容的自然高度决定高度。默认情况下，Web 浏览器会向下增长并垂直滚动，从而使高度成为不可预测和最不可控的维度。

对于这种情况，最好height完全删除该属性。返回到styles.css文本编辑器并height从文件中删除属性及其值并保存更改。删除该height值会使高度取决于容器内的内容量。您的 CSS 现在将如下所示：

样式文件

div {
  border: solid red 1px;
  padding: 30px 60px;
  width: 250px;
}

在本节中，您将width和height属性应用于<div>元素。您发现height由于 Web 内容的流动性，该属性可能难以实施。最后，您了解了如何在padding属性之前将这些维度属性应用于元素，从而导致比预期更大的维度。接下来，您将使用margin属性处理元素外部的间距。

使用该`margin`属性在容器外创建空间

在下一节中，您将使用该margin属性在边框外侧应用间距，以提供其他框之间的间距。该margin属性的功能与该padding属性类似，具有相同的多头和空头属性变化。您将使用在页面上的margin两个<div>元素之间提供空间并找出margin与padding.

首先，styles.css在您的文本编辑器中打开，margin向div类型选择器添加一个属性并赋予值20px。这将在页面元素的20px每一侧应用一个空格<div>：

样式文件

div {
    ...
    margin: 20px;
}

保存更改，styles.css然后打开浏览器并加载或刷新index.html文件。您会发现容器向右和向下移动了 20 个像素。请参阅下图以了解其外观：

两盒黑色衬线文本，带有细红色边框，每个框之间有空间。

<div>在浏览器中查看两个元素之间的间距。尽管第一个底部有边距，第二个顶部有边距，但它们之间的间距是20px和不是。这是由于属性的一个特征，即相邻容器重叠其属性，从较大的边距中取值。起初这可能没有意义，但将盒模型视为描述物理对象，然后定义每个对象周围需要多少空间会很有帮助。例如，如果您有 10 个人，并且您希望每个人周围有 2 米的空间，那么从一个人到另一个人的空间将是 2 米，而不是 4 米。 40px<div><div>marginmargin

由于取最大值margin作为外间距值，因此更改属性的值，使顶部和底部不同。您可以通过确保列表中的第一个和第三个值不同，或使用margin-topandmargin-bottom属性来使用速记来做到这一点。将顶部、右侧和左侧值保持在20px，但将底部值更改为60px。

样式文件

div {
    ...
    margin: 20px 20px 60px;
}

a 的简写列表中的第一个值margin定义顶部值，第二个值定义右侧和左侧，第三个值定义底部值。保存您的更改styles.css并index.html在浏览器中刷新。现在两个容器之间会有更多空间，如下图所示：

两盒黑色衬线文本，带有细红色边框，每个框之间有更多空间。

现在，<div>使用浏览器开发人员工具检查这两个元素之一。与所有其他属性不同，这些margin值不会改变容器的计算高度或宽度：

边框设置为黄色的框模型图，框的顶部、左侧和右侧为数字 20，底部为数字 60。

该margin属性有两个没有的特殊功能padding。首先，margin接受负值，这意味着它可以靠近相邻元素并导致它们重叠。此外，该margin属性接受的值auto，该值可用于居中内容。由于浏览器默认的工作方式，此auto值只会水平居中内容，并且仅当定义的width属性小于总可用空间的 100% 时。

返回到styles.css文本编辑器中的文件并将margin属性的第二个值从20px更改为auto：

样式文件

div {
    ...
    margin: 20px auto 60px;
}

将此更改保存到浏览器styles.css并重新加载index.html。该<div>容器即会出现水平居中，作为下图所示：

两盒带有细红色边框的黑色衬线文本框，每个框之间的空间以页面水平居中为中心。

您使用margin本节中的属性在<div>元素中的引号之间添加空格。您更改了margin以显示它如何重叠并遵循最大的相邻值。此外，您将margin-left和margin-right属性的值设置为auto，使容器居中。在最后一节中，您将使用box-sizing属性来更改盒模型的行为方式以及属性之间的关联。

使用`box-sizing`属性来改变盒子模型的行为

在最后一节中，您将使用box-sizing属性，它允许框模型改变它的公式化方式。当您使用盒模型时width，height、padding、和border属性对盒模型的整体尺寸有所贡献。现在有了该box-sizing属性，您将能够让浏览器计算padding和border以强制将值设置为width和height值。

到目前为止，您已经使用了box-sizing属性的默认状态，即content-box。该content-box盒模型通过将确定的宽度尺寸width，padding-right，padding-left，border-right-width，和border-left-width成为盒子的最终计算宽度值。同样地，content-box通过将发现的高度尺寸height，padding-top，padding-bottom，border-top-width，和border-bottom-width在该框的最终计算高度值到达。正如前面部分所讨论的，这会导致比预期更大的盒子，这可能会破坏布局和设计。

属性content-box值的替代方法box-sizing是border-box。它不是向声明的和值添加padding和border属性来获取计算值，而是减去这些值。这意味着具有盒模型的盒的宽度是属性减去左右值和左右值之和。结果是计算出的宽度等于属性值。widthheightborder-boxwidthpaddingborder-widthwidth

打开styles.css你的文本编辑器，并添加box-sizing与值属性border-box的div类型选择：

样式文件

div {
    ...
    box-sizing: border-box;
}

返回浏览器并重新加载index.html. 容器的大小，现在会更小，因为浏览器现在已经降低了盒模型的宽度，这样的计算宽度width，padding和border不超过width在CSS文件中定义的值。

<div>使用浏览器开发人员工具检查其中一个元素，以了解该box-sizing属性如何影响盒模型。在 Firefox 开发人员工具中，宽度被定义为128px，即使width属性 instyles.css的值为250px。元素的计算值为250px，通过从右侧填充、左侧填充、右侧边框宽度和左侧边框宽度128px加上加号计算得出。Firefox 开发者工具箱模型如下图所示：60px60px1px1px

框模型图设置为border-box，margin设置为黄色，border设置为灰色，padding设置为紫色，高度和宽度设置为蓝色。

box-sizing可以使用通用选择器 ( *)，也称为星形选择器，在网页的所有元素上更改该属性。此选择器将样式应用于页面上的所有元素。应谨慎使用此选择器，因为它确实会影响所有元素，并且可能会导致具有大量元素的页面出现性能问题。

打开styles.css并box-sizing从div类型选择器中删除该属性。然后在属性设置为的div选择器之前添加一个通用选择器：box-sizingborder-box

样式文件

* {
    box-sizing: border-box;
}
...

这些更改保存到styles.css和重装index.html。你会发现视觉上没有区别。改变盒模型的责任已经从显式设置转移到通用设置。

在本节中，您使用该box-sizing属性来更改盒模型对border-box值的行为方式，从而创建了一种更全面的使用盒模型的方法。您还了解了通用选择器以及如何将该box-sizing属性应用于网页上的所有元素。

结论

框模型对于理解样式如何应用于元素以及样式如何影响内容流是必要的。在本教程中，你学会了如何使用border，padding，margin，height，和width性质以及它们是如何相互关联的盒模型。您使用了box-sizing属性的默认框模型，这将帮助您计划和调试样式情况。此外，您还了解了border-box改变盒模型运作方式的值，并允许以更直观的方法使用盒模型。请记住，倾向于浏览器默认值有助于保持良好的性能，因此应根据需要而不是普遍地更改框模型。

如果您想阅读更多 CSS 教程，请尝试使用 CSS 系列设置 HTML 样式中的其他教程。

觉得文章有用？

点个广告表达一下你的爱意吧！