如何在CSS中使用盒子模型

来自菜鸟教程
跳转至：导航、​搜索

作为 Write for DOnations 计划的一部分，作者选择了 Diversity in Tech Fund 来接受捐赠。

介绍

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

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

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


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

先决条件

设置 HTML 和开发人员工具

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

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

索引.html 

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

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

接下来，您将需要内容来应用样式并开始使用盒子模型。 在下一个代码块中，在 <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 开发人员工具中找到的内容：

仔细观察 Firefox 的盒子模型可视化，构成盒子模型的属性从中心向外显示为 width、height、padding、[ X175X] 和 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 和 [ X108X] 对应并从上到右顺时针应用样式，然后是底部，最后是左侧。 例如，border-width: 10px 2px 8px 4px; 将在顶部应用 10px 边框，在右侧应用 2px 边框，在底部应用 8px 边框，以及 [ X142X] 边框位于框的左侧。

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

样式.css 

div {
    border: 1px solid red;
}

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

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

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

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

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

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

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

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

样式.css 

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

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

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

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

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

本节将重点介绍使用已定义的 width 和 height 属性值来强制 <div> 元素上的尺寸以及在盒模型中如何处理这些属性。 本节将使用像素单位来表示 width 和 height 值，通常称为 固定尺寸 ，以及百分比单位，称为 流体尺寸。 与前两个属性不同，width 和 height 不是简写。 这些应用定义的值。 但是，使用 CSS 设置尺寸值会导致一个值得怀疑的效果，这可以追溯到该语言的早期规范。 width 和 height 是应用 padding 和 border 值之前可见内容的设置尺寸。 这会导致一个比预期大的盒子。

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

样式.css 

div {
    ...
    width: 250px;
}

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

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

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

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

样式.css 

div {
    ...
    width: 100%;
}

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

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

样式.css 

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

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

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

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

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

样式.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 的值。 这将在页面上 <div> 元素的每一侧应用 20px 空间：

样式.css 

div {
    ...
    margin: 20px;
}

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

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

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

样式.css 

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

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

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

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

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

样式.css 

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 和 [ X159X] 值。

到目前为止，您已经使用了 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 来找到高度尺寸] 以得出盒子的最终计算高度值。 如前几节所述，这会导致比预期更大的盒子，这可能会破坏布局和设计。

box-sizing 属性的 content-box 值的替代值是 border-box。 它不是将 padding 和 border 属性添加到声明的 width 和 height 值以获得计算值，而是减去这些值。 这意味着具有 border-box 盒子模型的盒子的宽度是 width 属性减去左右 padding 值和左右 border-width 值。 结果是计算出的宽度等于 width 属性值。

在文本编辑器中打开 styles.css 并将值为 border-box 的 box-sizing 属性添加到 div 类型选择器：

样式.css 

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

返回浏览器并重新加载 index.html。 容器的大小现在会更小，因为浏览器现在正在减小盒子模型的宽度，以便 width、padding 和 border 的计算宽度不超过CSS 文件中定义的 width 值。

使用浏览器开发工具检查 <div> 元素之一，以了解 box-sizing 属性如何影响盒子模型。 在 Firefox 开发人员工具中，宽度定义为 128px，即使 styles.css 中的 width 属性的值为 250px。 元素的计算值为 250px，通过将 128px 加上右侧填充的 60px、左侧填充的 60px、[ X156X] 来自右边框宽度，1px 来自左边框宽度。 Firefox 开发者工具箱模型如下图所示：

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

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

样式.css 

* {
    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 样式系列 中的其他教程。

取自“https://cainiaojiaocheng.com/index.php?title=如何在CSS中使用盒子模型&oldid=27337”
Powered by MediaWiki