在 CSS 中调整项目大小

¥The natural or intrinsic size of things

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

¥HTML Elements have a natural size, set before they are affected by any CSS. A straightforward example is an image. An image file contains sizing information, described as its intrinsic size. This size is determined by the image itself, not by any formatting we happen to apply.

如果你将图片放置在页面上并且不更改其高度或宽度，无论是通过使用 <img> 标记上的属性还是通过 CSS，它将使用该固有尺寸进行显示。我们在示例中的图片下方添加了边框，以便你可以看到其文件中定义的大小范围。

¥If you place an image on a page and do not change its height or width, either by using attributes on the <img> tag or else by CSS, it will be displayed using that intrinsic size. We have given the image in the example below a border so that you can see the extent of its size as defined in its file.

另一方面，空的 <div> 没有自己的大小。如果你将 <div> 添加到没有内容的 HTML 中，然后像我们对图片所做的那样给它一个边框，你将在页面上看到一条线。这是元素上折叠的边框 - 没有内容可以使其保持打开状态。在下面的示例中，该边框延伸到容器的宽度，因为它是块级元素，你应该开始熟悉这种行为。它没有高度（或块维度中的大小），因为没有内容。

¥An empty <div>, on the other hand, has no size of its own. If you add a <div> to your HTML with no content, then give it a border as we did with the image, you will see a line on the page. This is the collapsed border on the element — there is no content to hold it open. In our example below, that border stretches to the width of the container, because it is a block level element, a behavior that should be starting to become familiar to you. It has no height (or size in the block dimension) because there is no content.

在上面的示例中，尝试在空元素内添加一些文本。边框现在包含该文本，因为元素的高度是由内容定义的。因此块维度中这个 <div> 的大小就来自于内容的大小。同样，这是元素的固有大小 - 它的大小由其内容定义。

¥In the example above, try adding some text inside the empty element. The border now contains that text because the height of the element is defined by the content. Therefore the size of this <div> in the block dimension comes from the size of the content. Again, this is the intrinsic size of the element — its size is defined by its content.

¥Setting a specific size

当然，我们可以为设计中的元素指定特定的尺寸。当为元素指定大小时（元素的内容需要适合该大小），我们将其称为外部大小。以上面示例中的 <div> 为例，我们可以为其指定特定的 width 和 height 值，现在无论放入什么内容，它都将具有该大小。正如我们在 我们上一课关于溢出的内容 中发现的，如果内容多于元素可容纳的空间，设置的高度可能会导致内容溢出。

¥We can, of course, give elements in our design a specific size. When a size is given to an element (the content of which then needs to fit into that size) we refer to it as an extrinsic size. Take our <div> from the example above — we can give it specific width and height values, and it will now have that size no matter what content is placed into it. As we discovered in our previous lesson on overflow, a set height can cause content to overflow if there is more content than the element has space to fit inside it.

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

¥Due to this problem of overflow, fixing the height of elements with lengths or percentages is something we need to do very carefully on the web.

¥Using percentages

在很多方面，百分比的作用就像长度单位，正如我们 在关于值和单位的课程中讨论过 一样，它们通常可以与长度互换使用。使用百分比时，你需要知道它是什么的百分比。对于另一个容器内的框，如果为子框指定百分比宽度，则它将是父容器宽度的百分比。

¥In many ways, percentages act like length units, and as we discussed in the lesson on values and units, they can often be used interchangeably with lengths. When using a percentage you need to be aware what it is a percentage of. In the case of a box inside another container, if you give the child box a percentage width it will be a percentage of the width of the parent container.

这是因为百分比根据包含块的大小进行解析。如果不应用百分比，我们的 <div> 将占用 100% 的可用空间，因为它是块级元素。如果我们给它一个百分比宽度，这将成为它通常填充的空间的百分比。

¥This is because percentages resolve against the size of the containing block. With no percentage applied, our <div> would take up 100% of the available space, as it is a block level element. If we give it a percentage width, this becomes a percentage of the space it would normally fill.

¥Percentage margins and padding

如果将 margins 和 padding 设置为百分比，你可能会注意到一些奇怪的行为。在下面的示例中，我们有一个盒子。我们给内盒赋予了 10% 的 margin 和 10% 的 padding。框顶部和底部的内边距和边距与左侧和右侧的内边距和边距大小相同。

¥If you set margins and padding as a percentage, you may notice some strange behavior. In the below example we have a box. We have given the inner box a margin of 10% and a padding of 10%. The padding and margin on the top and bottom of the box are the same size as the padding and margin on the left and right.

例如，你可能期望顶部和底部边距百分比是元素高度的百分比，左侧和右侧边距百分比是元素宽度的百分比。然而，这种情况并非如此！

¥You might expect for example the percentage top and bottom margins to be a percentage of the element's height, and the percentage left and right margins to be a percentage of the element's width. However, this is not the case!

当你使用以百分比设置的边距和填充时，该值是根据包含块的内联大小计算的 - 因此是使用水平语言时的宽度。在我们的示例中，所有边距和填充均为宽度的 10%。这意味着你可以在框周围拥有相同大小的边距和填充。如果你确实以这种方式使用百分比，则这是一个值得记住的事实。

¥When you use margin and padding set in percentages, the value is calculated from the inline size of the containing block — therefore the width when working in a horizontal language. In our example, all of the margins and padding are 10% of the width. This means you can have equal-sized margins and padding all around the box. This is a fact worth remembering if you do use percentages in this way.

¥min- and max- sizes

除了给元素固定的大小之外，我们还可以要求 CSS 给元素一个最小或最大大小。如果你有一个可能包含可变数量内容的框，并且你始终希望它至少具有特定高度，则可以在其上设置 min-height 属性。盒子将始终至少达到此高度，但如果内容多于盒子在其最小高度时所容纳的空间，盒子就会变得更高。

¥In addition to giving things a fixed size, we can ask CSS to give an element a minimum or a maximum size. If you have a box that might contain a variable amount of content, and you always want it to be at least a certain height, you could set the min-height property on it. The box will always be at least this height, but will then grow taller if there is more content than the box has space for at its minimum height.

在下面的示例中，你可以看到两个框，它们的 min-height 都定义为 150 像素。左边的盒子高 150 像素；右侧的框包含需要更多空间的内容，因此它的高度已超过 150 像素。

¥In the example below you can see two boxes, both with a defined min-height of 150 pixels. The box on the left is 150 pixels tall; the box on the right has content that needs more room, and so it has grown taller than 150 pixels.

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

¥This is very useful for dealing with variable amounts of content while avoiding overflow.

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

¥A common use of max-width is to cause images to scale down if there is not enough space to display them at their intrinsic width while making sure they don't become larger than that width.

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

¥As an example, if you were to set width: 100% on an image, and its intrinsic width was smaller than its container, the image would be forced to stretch and become larger, causing it to look pixelated.

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

¥If you instead use max-width: 100%, and its intrinsic width is smaller than its container, the image will not be forced to stretch and become larger, thus preventing pixelation.

在下面的示例中，我们使用了同一张图片三次。第一个图片已被指定为 width: 100%，并且位于比它大的容器中，因此它会拉伸到容器宽度。第二个图片设置了 max-width: 100%，因此不会拉伸以填充容器。第三个框再次包含相同的图片，也设置了 max-width: 100%；在这种情况下，你可以看到它如何缩小以适合盒子。

¥In the example below, we have used the same image three times. The first image has been given width: 100% and is in a container which is larger than it, therefore it stretches to the container width. The second image has max-width: 100% set on it and therefore does not stretch to fill the container. The third box contains the same image again, also with max-width: 100% set; in this case you can see how it has scaled down to fit into the box.

该技术用于使图片具有响应能力，以便在较小的设备上查看时图片会适当缩小。但是，你不应该使用此技术来加载非常大的图片，然后在浏览器中将其缩小。图片的尺寸应适当，不得大于设计中显示的最大尺寸所需的尺寸。下载过大的图片会导致你的网站变慢，并且如果用户使用按流量计费的连接，则可能会花费更多费用。

¥This technique is used to make images responsive, so that when viewed on a smaller device they scale down appropriately. You should, however, not use this technique to load really large images and then scale them down in the browser. Images should be appropriately sized to be no larger than they need to be for the largest size they are displayed in the design. Downloading overly large images will cause your site to become slow, and it can cost users more money if they are on a metered connection.

注意：了解有关 响应式图片技术 的更多信息。

¥Note: Find out more about responsive image techniques.

¥Viewport units

视口（即用于查看网站的浏览器中页面的可见区域）也有大小。在 CSS 中，我们有与视口大小相关的单位 - vw 单位表示视口宽度，vh 单位表示视口高度。使用这些单位，你可以相对于用户的视口调整某些内容的大小。

¥The viewport — which is the visible area of your page in the browser you are using to view a site — also has a size. In CSS we have units which relate to the size of the viewport — the vw unit for viewport width, and vh for viewport height. Using these units you can size something relative to the viewport of the user.

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

¥1vh is equal to 1% of the viewport height, and 1vw is equal to 1% of the viewport width. You can use these units to size boxes, but also text. In the example below we have a box which is sized as 20vh and 20vw. The box contains a letter A, which has been given a font-size of 10vh.

如果更改 vh 和 vw 值，则会更改框或字体的大小；更改视口大小也会改变它们的大小，因为它们的大小是相对于视口的。要在更改视口大小时查看示例的变化，你需要在可以调整大小的新浏览器窗口中加载示例（因为包含上面所示示例的嵌入式 <iframe> 是其视口）。打开示例，调整浏览器窗口的大小，观察框和文本的大小发生了什么变化。

¥If you change the vh and vw values this will change the size of the box or font; changing the viewport size will also change their sizes because they are sized relative to the viewport. To see the example change when you change the viewport size you will need to load the example in a new browser window that you can resize (as the embedded <iframe> that contains the example shown above is its viewport). Open the example, resize the browser window, and observe what happens to the size of the box and text.

根据视口调整事物的大小在你的设计中非常有用。例如，如果你希望在其余内容之前显示整页的英雄部分，则将页面的该部分设置为 100vh 高会将其余内容推到视口下方，这意味着它仅在文档打开后才会显示。 滚动。

¥Sizing things according to the viewport can be useful in your designs. For example, if you want a full-page hero section to show before the rest of your content, making that part of your page 100vh high will push the rest of the content below the viewport, meaning that it will only appear once the document is scrolled.

¥Test your skills!

你已读完本文，但你还记得最重要的信息吗？在继续之前，你可以找到一些进一步的测试来验证你是否已保留此信息 - 请参阅 测试你的技能：大小。

¥You've reached the end of this article, but can you remember the most important information? You can find some further tests to verify that you've retained this information before you move on — see Test your skills: Sizing.

¥Summary

本课程概述了在确定 Web 上的事物大小时可能遇到的一些关键问题。当你进入 CSS 布局 时，大小调整对于掌握不同的布局方法将变得非常重要，因此在继续之前有必要了解这里的概念。

¥This lesson has given you a rundown of some key issues that you might run into when sizing things on the web. When you move onto CSS Layout, sizing will become very important in mastering the different layout methods, so it is worth understanding the concepts here before moving on.

在下一篇文章中，我们将了解 CSS 中如何处理 图片、媒体和表单元素。

¥In the next article, we'll take a look at how images, media, and form elements are treated in CSS.