测试你的技能：大小
本技能测试的目的是评估你是否理解 在 CSS 中调整项目大小 的不同方式。
¥The aim of this skill test is to assess whether you understand the different ways of sizing items in CSS.
注意：你可以在此页面上的交互式编辑器或在线编辑器（例如 CodePen、JSFiddle 或 Glitch）中尝试解决方案。
¥Note: You can try solutions in the interactive editors on this page or in an online editor such as CodePen, JSFiddle, or Glitch.
如果你遇到困难，可以通过我们的 沟通渠道 之一与我们联系。
¥If you get stuck, you can reach out to us in one of our communication channels.
任务 1
¥Task 1
在此任务中，你有两个盒子。第一个的大小应确保高度至少为 100 像素高，即使内容较少会导致其增长到该高度。但是，如果内容多于 100 像素，则内容不应溢出。通过从 HTML 中删除内容来测试此框，以确保即使没有内容，你仍然获得 100 像素高的框。
¥In this task, you have two boxes. The first should be sized so that the height will be at least 100 pixels tall, even if there is less content that would cause it to grow to that height. However, the content should not overflow if there is more content than fits in 100 pixels. Test this box by removing the content from the HTML to make sure you still get a 100 pixel tall box even with no content.
第二个框的高度应固定为 100 像素，这样如果太多，内容就会溢出。
¥The second box should be fixed at 100 pixels tall, so that content will overflow if there is too much.
尝试更新下面的实时代码以重新创建完成的示例：
¥Try updating the live code below to recreate the finished example:
下载此任务的起点 在你自己的编辑器或在线编辑器中工作。
¥Download the starting point for this task to work in your own editor or in an online editor.
任务 2
¥Task 2
在此任务中，你有一个盒子，其中包含另一个盒子。你的任务是使内盒宽度为外盒宽度的 60%。box-sizing 属性的值设置为 border-box，这意味着总宽度包括任何内边距和边框。你还应该使用宽度（或内联大小）作为计算百分比的大小，为内框填充 10%。
¥In this task, you have a box, which contains another box. Your task is to make the inner box 60% of the width of the outer box. The value of the box-sizing property is set to border-box, which means that the total width includes any padding and border. You should also give the inner box padding of 10% using the width (or inline size) as the size from which that percentage is calculated.
你的最终结果应如下图所示：
¥Your final result should look like the image below:
尝试更新下面的实时代码以重新创建完成的示例：
¥Try updating the live code below to recreate the finished example:
下载此任务的起点 在你自己的编辑器或在线编辑器中工作。
¥Download the starting point for this task to work in your own editor or in an online editor.
任务 3
¥Task 3
在此任务中，框中有两个图片。一张图片比盒子小，另一张图片比盒子大并且突破了盒子。如果你想象该框是响应式的，因此可以放大和缩小，你会将哪个属性应用于图片，以便大图片缩小到框内，但小图片不会拉伸。
¥In this task, you have two images in boxes. One image is smaller than the box, the other is larger and breaking out of the box. If you imagine that the box is responsive and therefore could grow and shrink, which property would you apply to the image so that the large image shrinks down into the box but the small image does not stretch.
你的最终结果应如下图所示：
¥Your final result should look like the images below:
尝试更新下面的实时代码以重新创建完成的示例：
¥Try updating the live code below to recreate the finished example:
下载此任务的起点 在你自己的编辑器或在线编辑器中工作。
¥Download the starting point for this task to work in your own editor or in an online editor.