CSS 中的尺寸项目
在之前的课程中，您已经了解了使用 CSS 为网页上的项目设置尺寸的多种方法。了解设计中不同功能的尺寸很重要。因此，在本课中，我们将总结使用 CSS 为元素设置尺寸的各种方法，并定义一些关于尺寸的术语，这些术语将帮助您在未来。
事物的自然或固有尺寸
HTML 元素在受到任何 CSS 影响之前，都具有自然尺寸。一个简单的例子就是图片。图片文件包含尺寸信息，称为其**固有尺寸**。此尺寸由图片本身决定，而不是由我们碰巧应用的任何格式决定。
如果您将图片放置在页面上，并且没有使用 <img> 标签上的属性或 CSS 更改其高度或宽度，它将使用该固有尺寸显示。我们为下面示例中的图片添加了边框，以便您可以看到其在文件中定义的尺寸范围。
另一方面，空 <div> 本身没有尺寸。如果您将一个 <div> 添加到您的 HTML 中，并且没有内容，然后像我们对图片所做的那样为其添加边框，您将看到页面上有一条线。这是元素上折叠的边框 — 没有内容可以将其撑开。在我们下面的示例中，该边框延伸到容器的宽度，因为它是一个块级元素，这是一种您应该开始熟悉的行为。它没有高度（或块维度的尺寸），因为没有内容。
在上面的示例中，尝试在空元素内添加一些文本。现在边框包含该文本，因为元素的高度由内容定义。因此，此 <div> 在块维度上的尺寸来自内容的尺寸。同样，这是元素的固有尺寸 — 它的尺寸由其内容定义。
设置特定尺寸
当然，我们可以为设计中的元素赋予特定的尺寸。当为元素赋予尺寸时（其内容需要适合该尺寸），我们称之为**外在尺寸**。以我们上面示例中的 <div> 为例 — 我们可以为其指定特定的 width 和 height 值，现在无论放置什么内容，它都将具有该尺寸。正如我们 在关于溢出的上一课中发现的那样，如果内容多于元素可以容纳的空间，则设置的高度会导致内容溢出。
由于溢出问题，我们必须非常小心地在网页上使用固定高度的元素，这些元素具有长度或百分比。
使用百分比
在许多方面，百分比类似于长度单位，正如我们在 关于值和单位的课程中讨论的那样，它们通常可以与长度互换使用。使用百分比时，您需要知道它是相对于什么值的百分比。对于位于另一个容器内的框，如果您为子框指定百分比宽度，它将是父容器宽度的百分比。
这是因为百分比相对于包含块的尺寸解析。没有应用百分比的情况下，我们的 <div> 将占据 100% 的可用空间，因为它是一个块级元素。如果我们为其指定百分比宽度，这将是其通常填充空间的百分比。
百分比边距和填充
如果您将`margins`和`padding`设置为百分比，您可能会注意到一些奇怪的行为。在下面的示例中，我们有一个框。我们给内部框设置了margin为 10% 和padding为 10%。框顶部和底部的填充和边距与左右两侧的填充和边距大小相同。
您可能会期望例如百分比的顶部和底部边距是元素高度的百分比，而百分比的左侧和右侧边距是元素宽度的百分比。但是，事实并非如此！
当您使用百分比设置的边距和填充时，该值将根据包含块的**内联大小**计算——因此在使用水平语言时为宽度。在我们的示例中，所有边距和填充都是宽度的 10%。这意味着您可以在框的周围设置大小相同的边距和填充。如果您以这种方式使用百分比，这一点值得记住。
最小和最大尺寸
除了赋予事物固定大小外，我们还可以要求 CSS 为元素赋予最小或最大大小。如果您有一个可能包含可变数量内容的框，并且始终希望它至少具有特定高度，则可以在其上设置min-height属性。该框将始终至少具有该高度，但如果内容超过框在最小高度下所能容纳的空间，则会变高。
在下面的示例中，您可以看到两个框，它们都定义了 150 像素的min-height。左侧的框是 150 像素高；右侧的框包含需要更多空间的内容，因此它比 150 像素高。
这对处理可变数量的内容同时避免溢出非常有用。
max-width的常见用途是使图像在没有足够空间以其固有宽度显示时缩小，同时确保它们不会大于该宽度。
例如，如果您在图像上设置了width: 100%，并且其固有宽度小于其容器，则图像将被强制拉伸并变大，导致它看起来像素化。
如果您改用max-width: 100%，并且其固有宽度小于其容器，则图像不会被强制拉伸并变大，从而防止像素化。
在下面的示例中，我们使用了相同的图像三次。第一个图像被赋予了width: 100%，并且在一个比它大的容器中，因此它会拉伸到容器宽度。第二个图像设置了max-width: 100%，因此不会拉伸以填充容器。第三个框再次包含相同的图像，也设置了max-width: 100%；在这种情况下，您可以看到它是如何缩小以适应框的。
此技术用于使图像**响应式**，以便在较小的设备上查看时，它们会相应地缩小。但是，您不应该使用此技术来加载非常大的图像，然后在浏览器中缩小它们。图像的大小应该适合它们在设计中显示的最大尺寸。下载过大的图像会导致您的网站变慢，如果用户使用的是计量连接，则会花费他们更多钱。
注意：了解有关响应式图像技术的更多信息。
视窗单位
视窗——即您用来查看网站的浏览器中网页的可见区域——也具有大小。在 CSS 中，我们有与视窗大小相关的单位——vw 单位用于视窗宽度，vh 用于视窗高度。使用这些单位，您可以根据用户的视窗大小调整某个东西的大小。
1vh 等于视窗高度的 1%，1vw 等于视窗宽度的 1%。您可以使用这些单位调整框的大小，也可以调整文本的大小。在下面的示例中，我们有一个大小为 20vh 和 20vw 的框。该框包含一个字母`A`，它被赋予了font-size为 10vh。
如果您更改vh 和vw 值，这将改变框或字体的尺寸；改变视窗大小也会改变它们的尺寸，因为它们是相对于视窗大小的。要查看更改视窗大小时的示例变化，您需要在一个可以调整大小的新浏览器窗口中加载该示例（因为上面显示的示例使用的嵌入式<iframe>是其视窗）。打开示例，调整浏览器窗口大小，并观察框和文本大小的变化。
根据视窗大小调整事物的大小在您的设计中可能很有用。例如，如果您希望在显示其余内容之前显示一个全屏英雄部分，将该部分页面设置为 100vh 高将把其余内容推到视窗下方，这意味着它只有在滚动文档时才会出现。
测试您的技能！
您已经阅读到本文的结尾，但是您能记住最重要的信息吗？您可以在继续之前找到一些额外的测试来验证您是否保留了这些信息——请参阅测试您的技能：尺寸。
总结
本课程为您介绍了在 Web 上调整事物大小时可能会遇到的一些关键问题。当您进入CSS 布局时，尺寸在掌握不同的布局方法中变得非常重要，因此在继续之前了解这些概念是值得的。
在下一篇文章中，我们将探讨 CSS 如何处理图像、媒体和表单元素。