1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
|
---
title: 在CSS中调整大小
slug: Learn/CSS/Building_blocks/Sizing_items_in_CSS
translation_of: Learn/CSS/Building_blocks/Sizing_items_in_CSS
---
<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Values_and_units", "Learn/CSS/Building_blocks/Images_media_form_elements", "Learn/CSS/Building_blocks")}}</div>
<p>在前面的课程中你已经看到了几种使用CSS为页面中元素设定尺寸的方法。 在我们设计网页的时候，需要理解这些不同方法之间的差异。在本课程中，我们将总结设定元素尺寸的方法，并定义几个术语，这些内容将会在未来对你有所帮助。</p>
<table class="learn-box standard-table">
<tbody>
<tr>
<th scope="row">前提：</th>
<td>基本的电脑知识，<a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Installing_basic_software">安装了必要的软件</a>，<a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">处理文件</a>的基础知识 , HTML基础（学习<a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a>），理解CSS如何工作（学习<a href="/en-US/docs/Learn/CSS/First_steps">CSS first steps</a>）。</td>
</tr>
<tr>
<th scope="row">目标：</th>
<td>理解在CSS中约束物体大小的不同方式。</td>
</tr>
</tbody>
</table>
<h2 id="原始尺寸，或固有尺寸">原始尺寸，或固有尺寸</h2>
<p>在受CSS设置影响之前，HTML元素有其原始的尺寸。一个直观的例子就是图像。一副图像的长和宽由这个图像文件自身确定。这个尺寸就是固有尺寸。</p>
<p>如果你把图片放置在网页中的时候没有在<code><img></code> 标签或CSS中设置其尺寸，那么将使用其固有尺寸显示。我们给下面的示例图像绘制了一个边框，以便你看出图像文件的长宽。</p>
<p>{{EmbedGHLiveSample("css-examples/learn/sizing/intrinsic-image.html", '100%', 600)}}</p>
<p>一个空的{{htmlelement("div")}}是没有尺寸的。如果你在你的HTML文件中添加一个空{{htmlelement("div")}} 并给予其边框（就像刚才我们为图像做的那样），你会在页面上看到一条线。这是边框被压缩后的效果— 它内部没有内容。在我们下面的例子中，边框宽度扩展到整个容器宽度，因为它是块级元素，而块级元素的行为就是这样的。它没有高度，或者说高度为0，因为内部没有内容。</p>
<p>{{EmbedGHLiveSample("css-examples/learn/sizing/intrinsic-text.html", '100%', 500)}}</p>
<p>在上面的例子中，试着在空元素内部添加些内容。现在边框内包含一些文字了，因为元素的高度由其所含内容高度确定。再强调一次，这就是元素的固有尺寸 — 由其所包含的内容决定。</p>
<h2 id="设置具体的尺寸">设置具体的尺寸</h2>
<p>我们当然可以给设计中的元素指定具体大小。 当给元素指定尺寸（然后其内容需要适合该尺寸）时，我们将其称为<strong>外部尺寸</strong>。以上面例子中的 <code><div></code> 举例 — 我们可以给它一个具体的 {{cssxref("width")}} 和 {{cssxref("height")}} 值, 然后不论我们放什么内容进去它都是该尺寸。 正如我们在<a href="/zh-CN/docs/Learn/CSS/Building_blocks/Overflowing_content">上一课</a>有关溢出的内容中所发现的，如果内容的数量超出了元素可容纳的空间，则设置的高度会导致内容溢出。</p>
<p>{{EmbedGHLiveSample("css-examples/learn/sizing/height.html", '100%', 600)}}</p>
<p>由于存在溢出问题，在网络上使用长度或百分比固定元素的高度需要非常小心。</p>
<h3 id="使用百分数">使用百分数</h3>
<p>许多时候，百分数是长度单位，正如我们在<a href="/zh-CN/docs/Learn/CSS/Building_blocks/Values_and_units#Percentages">Value and units这节课中讨论的那样</a>，它们常常可与长度互换。当使用百分数时，你需要清楚，它是<strong>什么</strong>东西的百分数。对于一个处于另外一个容器当中的盒子，如果你给予了子盒子一个百分数作为宽度，那么它指的是父容器宽度的百分数。</p>
<p>{{EmbedGHLiveSample("css-examples/learn/sizing/percent-width.html", '100%', 600)}}</p>
<p>这是因为百分数是以包含盒子的块为根据解析的。如果我们的<code><div></code>没有被指定百分数的值，那么它会占据100%的可用空间，因为它是块级别的元素。如果我们给了它一个百分数作为宽度，那么这就是它原来情况下可以占据空间的百分数。</p>
<h3 id="把百分数作为内外边距">把百分数作为内外边距</h3>
<p>如果你把<code>margins</code>和<code>padding</code>设置为百分数的话，你会注意到一些奇怪的表现。在下面的例子里，我们有一个盒子，我们给了里面的盒子10%的{{cssxref("margin")}}以及10%的{{cssxref("padding")}}。盒子底部和顶部的内外边距，和左右外边距有同样的大小。</p>
<p>{{EmbedGHLiveSample("css-examples/learn/sizing/percent-mp.html", '100%', 700)}}</p>
<p>或许，你期望元素的上下外边距是其高度的百分比，元素的左右外边距是其宽度的百分比。但情况并非如此！</p>
<p>使用百分比作为元素外边距（ margin ）或填充（ padding ）的单位时，值是以包含块的<strong>内联尺寸</strong>进行计算的，也就是元素的水平宽度。在我们的示例中，所有的外边距或填充都是宽度的10%。请记住一个事实，当你使用百分比作为元素外边距或填充的单位时，你将得到一个相同尺寸的外边距或填充。</p>
<h2 id="min-和max-尺寸">min-和max-尺寸</h2>
<p>除了让万物都有一个确定的大小以外，我们可以让CSS给定一个元素的最大或最小尺寸。如果你有一个包含了变化容量的内容的盒子，而且你总是想让它<strong>至少</strong>有个确定的高度，你应该给它设置一个{{cssxref("min-height")}}属性。盒子就会一直保持大于这个最小高度，但是如果有比这个盒子在最小高度状态下所能容纳的更多内容，那么盒子就会变大。</p>
<p>在以下的示例中，你可以看到两个盒子，两个都有150像素的确定高度，左边的盒子有150像素高，右边的盒子有需要更多空间才能装下的内容，所以它变得比150像素高。</p>
<p>{{EmbedGHLiveSample("css-examples/learn/sizing/min-height.html", '100%', 800)}}</p>
<p>这在避免溢出的同时并处理变化容量的内容的时候是很有用的。</p>
<p>{{cssxref("max-width")}}的常见用法为，在没有足够空间以原有宽度展示图像时，让图像缩小，同时确保它们不会比这一宽度大。</p>
<p>作为示例，如果你设定一个图像的属性为<code>width: 100%</code>，而且它的原始宽度小于容器，图像会被强制拉伸以变大，看起来像素更加明显。如果它的原始宽度大于容器，它则会溢出。两种情形都不是你想要看到的。</p>
<p>如果你使用了<code>max-width: 100%</code>，那么图像可以变得比原始尺寸更小，但是不会大于原始尺寸的100%。</p>
<p>在下面的示例里，我们使用了两次相同的图片。第一次使用，属性值已设为<code>width: 100%</code>，位于比图片大的容器里，因此图片拉伸到了与容器相同的宽度；第二次的属性值则设为<code>max-width: 100%</code>，因此它并没有拉伸到充满容器；第三个盒子再一次包含了相同的图片，同时设定了<code>max-width: 100%</code>属性，这时你能看到它是怎样缩小来和盒子大小相适应的。</p>
<p>{{EmbedGHLiveSample("css-examples/learn/sizing/max-width.html", '100%', 800)}}</p>
<p>这个技术是用来让图片<strong>可响应</strong>的，所以在更小的设备上浏览的时候，它们会合适地缩放。你无论怎样都不应该用这个技术先载入大原始尺寸的图片，再对它们在浏览器中进行缩放。图像应该合适地调整尺寸，以使它们不会比预计中展示时所需要的最大尺寸大。下载过大的图像会造成你的网站变慢，如果用户使用按量收费的网络连接，会让用户花更多钱。</p>
<div class="blockIndicator note">
<p><strong>备注：</strong>了解更多关于<a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">响应式图片技术</a>的事情。</p>
</div>
<h2 id="视口单位">视口单位</h2>
<p>视口，即你在浏览器中看到的部分页面，也是有尺寸的。在CSS中，我们有与视口尺寸相关的度量单位，即意为视口宽度的<code>vw</code>单位，以及意为视口高度的 <code>vh</code>单位。使用这些单位，你可以把一些东西做得随用户的视口改变大小。</p>
<p><code>1vh</code>等于视口高度的1%，<code>1vw</code>则为视口宽度的1%.你可以用这些单位约束盒子的大小，还有文字的大小。在下面的示例里，我们有一个大小被设为20vh和20vw的盒子。这个盒子里面有一个字母<code>A</code>，其{{cssxref("font-size")}}属性被设成了10vh。</p>
<p>{{EmbedGHLiveSample("css-examples/learn/sizing/vw-vh.html", '100%', 600)}}</p>
<p><strong>如果你改变了<code>vh</code>和<code>vw</code>的对应值，盒子和字体的大小也会改变；视口大小的变化也会让它们的大小变化，因为它们是依照视口来定大小的。想看到随着你改变视口大小的时候示例的变化的话，你需要在一个新浏览器视窗里面载入此示例，因为你可以控制该视窗的大小，同时上面示例所在的嵌入的<code><iframe></code>的大小即是对上面示例而言的视口。<a href="https://mdn.github.io/css-examples/learn/sizing/vw-vh.html">打开此示例</a>，调整浏览器视窗的大小，观察在盒子和文本的大小上所发生的事情。</strong></p>
<p>在你的设计中，根据视口改变物件的大小是很有用的。例如，如果你想要在你其他内容之前，有一个充满整个视口的视觉宣传段落，让你的页面的那个部分有100vh高的话，会把剩下的内容推到视口的下面，只有向下滚动文档的时候它们才会出现。</p>
<h2 id="小结">小结</h2>
<p>本节课，你已经得到了一个对于你可能在约束网站上的内容大小的时候，会遇到的一些关键问题的详细介绍。当你继续学习<a href="/en-US/docs/Learn/CSS/CSS_layout">CSS布局</a>的时候，约束大小会成为掌握不同布局途径的非常重要的基础，所以在继续之前有必要在这里理解这些概念。</p>
<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Values_and_units", "Learn/CSS/Building_blocks/Images_media_form_elements", "Learn/CSS/Building_blocks")}}</p>
<h2 id="模块目录">模块目录</h2>
<ol>
<li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">层叠与继承</a></li>
<li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Selectors">CSS选择器</a>
<ul>
<li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">标签，类，ID选择器</a></li>
<li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">属性选择器</a></li>
<li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">伪类和伪元素</a></li>
<li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Selectors/Combinators">关系选择器</a></li>
</ul>
</li>
<li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/The_box_model">盒模型</a></li>
<li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">背景与边框</a></li>
<li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">处理不同文字方向的文本</a></li>
<li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Overflowing_content">溢出的内容</a></li>
<li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Values_and_units">值和单位</a></li>
<li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">在CSS中调整大小</a></li>
<li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Images_media_form_elements">图像、媒体和表单元素</a></li>
<li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Styling_tables">样式化表格</a></li>
<li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Debugging_CSS">调试CSS</a></li>
<li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Organizing">组织CSS</a><a href="/en-US/docs/Learn/CSS/Building_blocks/Organizing"> </a></li>
</ol>
|
