CSS 中的尺寸调整元素

事物的自然尺寸或固有尺寸

HTML 元素具有自然尺寸，在受到任何 CSS 影响之前就已设置。一个简单的例子是图片。图片文件包含尺寸信息，被称为其固有尺寸。这个尺寸由图片本身决定，而不是由我们碰巧应用的任何格式决定。

如果您将图片放在页面上，并且不通过使用 <img> 属性或 CSS 改变其高度或宽度，它将使用其固有尺寸显示。我们在下面的示例中给图片添加了边框，以便您可以看到其文件中定义的尺寸范围。

<img
  alt="star"
  src="https://mdn.github.io/shared-assets/images/examples/big-star.png" />

img {
  border: 5px solid darkblue;
}

另一方面，一个空的 <div> 没有自己的尺寸。如果您在 HTML 中添加一个没有内容的 <div>，然后像我们处理图片一样给它添加一个边框，您会在页面上看到一条线。这是 <div> 的折叠边框——它没有内容来支撑。

在我们的下面的示例中，该边框覆盖了容器的整个宽度，因为它是一个块级元素，这种行为对您来说应该开始变得熟悉。它没有高度（或块维度的尺寸），因为它没有内容。

<div class="box"></div>

.box {
  border: 5px solid darkblue;
}

在上面的示例中，尝试在空元素内添加一些文本。您会看到边框展开，因为元素的高度由内容定义。同样，这是元素的固有尺寸——它的尺寸由其内容定义。

设置特定尺寸

当然，我们可以给设计中的元素一个特定尺寸。当给定一个元素的尺寸时（其内容需要适应该尺寸），我们称之为外在尺寸。

在下一个示例中，我们给两个 <div> 设置了特定的 width 和 height 值，无论其中放置什么内容，它们都将具有该尺寸。正如右侧的 <div> 所示，如果内容量超过其包含元素的容量，设置固定高度可能会导致内容溢出（您将在后续课程中了解更多关于 溢出 的内容）。

<div class="wrapper">
  <div class="box"></div>
  <div class="box">
    These boxes both have a height set, this box has content in it which will
    need more space than the assigned height, and so we get overflow.
  </div>
</div>

body {
  font: 1.2em sans-serif;
}
.wrapper {
  display: flex;
}

.wrapper > * {
  margin: 20px;
}

.box {
  border: 5px solid darkblue;
  height: 100px;
  width: 200px;
}

由于溢出问题，我们必须非常小心地在网页上用长度或百分比来固定元素的高度。

使用百分比

在许多方面，百分比的作用类似于长度单位，正如我们在关于值和单位的课程中讨论的，它们通常可以与长度互换使用。使用百分比时，您需要清楚它所占的百分比是什么。在一个容器内的盒子的情况下，如果您给子盒子一个百分比宽度，它将是父容器宽度的百分比。

<div class="container">
  <div class="box">I have a percentage width.</div>
</div>

body {
  font: 1.2em sans-serif;
}

.box {
  border: 5px solid darkblue;
  width: 50%;
}

这是因为百分比是相对于包含块的尺寸来解析的。如果未应用百分比，我们的 box <div> 会占据 100% 的可用空间，因为它是一个块级元素。如果我们给它一个百分比宽度，这就会成为它通常会填充的空间的百分比。

尝试编辑上面的示例

1. 移除 box <div> 的 width 声明，以验证它默认占用 100% 的可用 width。
2. 恢复之前的更改 — 再次将 box <div> 的 width 设置为 50%。
3. 现在将 container <div> 的 width 设置为 50%。您会看到 box <div> 的 width 变小了，因为它相对于其容器的 width。

百分比外边距和内边距

如果您将 margins 和 padding 设置为百分比，您可能会注意到一些奇怪的行为。

在下面的示例中，我们有一个盒子，我们为其设置了 10% 的 margin 和 10% 的 padding。盒子顶部和底部的内边距和外边距与左右两侧的内边距和外边距大小相同。

<div class="box">I have margin and padding set to 10% on all sides.</div>

body {
  font: 1.2em sans-serif;
}
.box {
  border: 5px solid darkblue;
  width: 200px;
  margin: 10%;
  padding: 10%;
}

您可能会认为百分比的顶部和底部外边距是元素高度的百分比，而百分比的左侧和右侧外边距是元素宽度的百分比。然而，情况并非如此！

当您使用百分比设置外边距和内边距时，其值是根据包含块的行内尺寸计算的——因此在水平语言中是宽度。在我们的示例中，所有的外边距和内边距都是宽度的 10%。这意味着您可以让盒子四周具有相等尺寸的外边距和内边距。如果您以这种方式使用百分比，这是一个值得记住的事实。

最小和最大尺寸

除了赋予事物固定尺寸之外，我们还可以要求 CSS 赋予元素最小或最大尺寸。如果您有一个可能包含可变数量内容的盒子，并且您总是希望它至少达到某个高度，您可以在其上设置 min-height 属性。该盒子将始终至少有这个高度，但如果内容超出其最小高度所能容纳的空间，它将变得更高。

在下一个示例中，您可以看到两个盒子，它们都定义了 100 像素的 min-height。左侧的盒子高 100 像素；右侧的盒子内容需要更多空间，因此它变得比 100 像素更高。

<div class="wrapper">
  <div class="box"></div>
  <div class="box">
    These boxes both have a min-height set, this box has content in it which
    will need more space than the assigned height, and so it grows from the
    minimum.
  </div>
</div>

body {
  font: 1.2em sans-serif;
}
.wrapper {
  display: flex;
  align-items: flex-start;
}

.wrapper > * {
  margin: 20px;
}

.box {
  border: 5px solid darkblue;
  min-height: 100px;
  width: 200px;
}

这对于处理可变内容量时避免溢出非常有用。

图片上的 max-width

max-width 的一个常见用途是，如果空间不足以以其固有宽度显示图片，则让图片缩小，同时确保它们不会变得大于该宽度。

例如，如果您在一张图片上设置 width: 100%，并且其固有宽度小于其容器，图片将被迫拉伸并变大，导致看起来像素化。

如果您改用 max-width: 100%，并且其固有宽度小于其容器，图片将不会被强制拉伸变大，从而防止像素化。

在下面的示例中，我们嵌入了同一张图片三次

• 第一张图片设置了 width: 100%，并且在一个比它大的容器中，因此它会拉伸以适应容器的宽度。
• 第二张图片设置了 max-width: 100%，因此它不会拉伸以填满容器。
• 第三个盒子再次包含相同的图片，也设置了 max-width: 100%；在这种情况下，您可以看到它是如何缩小以适应盒子。

<div class="wrapper">
  <div class="box">
    <img
      alt="star"
      class="width"
      src="https://mdn.github.io/shared-assets/images/examples/big-star.png" />
  </div>
  <div class="box">
    <img
      alt="star"
      class="max"
      src="https://mdn.github.io/shared-assets/images/examples/big-star.png" />
  </div>
  <div class="mini-box">
    <img
      alt="star"
      class="max"
      src="https://mdn.github.io/shared-assets/images/examples/big-star.png" />
  </div>
</div>

.wrapper {
  display: flex;
  align-items: flex-start;
}

.wrapper > * {
  margin: 20px;
}

.box,
.mini-box {
  border: 5px solid darkblue;
}

.box {
  width: 200px;
}
.mini-box {
  width: 30px;
}
.width {
  width: 100%;
}
.max {
  max-width: 100%;
}

这种技术用于使图像具有响应性，以便在较小的设备上观看时，它们能够适当缩小。然而，您不应该使用这种技术来加载真正大的图像，然后在浏览器中缩小它们。图像应适当调整大小，使其不超过设计中显示的最大尺寸。下载过大的图像会导致您的网站变慢，如果用户按兆字节付费数据，这可能会让他们花费更多钱。

视口单位

视口——您用于查看网站的浏览器中页面的可见区域——也有一个尺寸。在 CSS 中，我们有与视口尺寸相关的单位——vw 单位表示视口宽度，vh 表示视口高度。使用这些单位，您可以根据用户的视口尺寸来调整大小。

1vh 等于视口高度的 1%，1vw 等于视口宽度的 1%。您可以使用这些单位来调整盒子的大小，也可以调整文本的大小。在下面的示例中，我们有一个大小为 20vh 和 20vw 的盒子。盒子中包含一个字母 A，其 font-size 设置为 10vh。

<div class="box">A</div>

body {
  font-family: sans-serif;
}

.box {
  border: 5px solid darkblue;
  width: 20vw;
  height: 20vh;
  font-size: 10vh;
}

如果您更改 vh 和 vw 值，这将改变盒子和字体的大小；更改视口大小也会改变它们的大小，因为它们是相对于视口调整大小的。要查看当您更改视口大小时示例的变化，您需要在一个可以调整大小的新浏览器窗口中加载示例（因为包含上面所示示例的嵌入式 <iframe> 就是它的视口）。打开示例，调整浏览器窗口大小，并观察盒子和文本大小的变化。

根据视口调整元素大小在您的设计中可能很有用。例如，如果您希望在内容的其余部分之前显示一个全屏英雄部分，将页面的该部分设置为 100vh 高度将把内容的其余部分推到视口下方，这意味着只有在文档滚动后才会出现。

总结

本课程向您概述了在网页上调整元素尺寸时可能遇到的一些关键问题。当您进入 CSS 布局 时，尺寸调整在掌握不同的布局方法中将变得非常重要，因此在继续之前值得理解这里的概念。

在下一篇文章中，我们将为您提供一些测试，您可以使用它们来检查您对我们提供的 CSS 尺寸调整信息的理解和记忆程度。

• 上一页
• 概述：CSS 样式基础
• 下一页