2.7 KiB
2.7 KiB
id | challengeType | videoUrl | forumTopicId | title |
---|---|---|---|---|
bad82fee1322bd9aedf08721 | 0 | https://scrimba.com/c/cN66JSL | 301089 | 理解绝对单位与相对单位 |
Description
px
值。像素px
是一种长度单位,来告诉浏览器应该如何调整元素大小和空间大小。其实除了像素,CSS 也有其他不同的长度单位供我们使用。
单位长度的类型可以分成 2 种,一种是相对的,一种是绝对的。例如,in
和mm
分别代表着英寸和毫米。绝对长度单位会接近屏幕上的实际测量值,不过不同屏幕的分辨率会存在差异,可能会导致一些误差。
相对单位长度,就像em
和rem
,它们会依赖其他长度的值。就好像em
的大小基于元素的字体的font-size
值,如果你使用em
单位来设置font-size
值,它的值会跟随父元素的font-size
值来改变。
注意:有些单位长度选项是相对视窗大小来改变值的,符合了响应式 web 的设计原则。
Instructions
red-box
class 添加padding
属性,并设置为1.5em
。
Tests
tests:
- text: '<code>red-box</code> class 应该含有<code>padding</code>属性。'
testString: assert($('.red-box').css('padding-top') != '0px' && $('.red-box').css('padding-right') != '0px' && $('.red-box').css('padding-bottom') != '0px' && $('.red-box').css('padding-left') != '0px');
- text: '<code>red-box</code> class 的<code>padding</code>值应为 1.5em。'
testString: assert(code.match(/\.red-box\s*?{[\s\S]*padding:\s*?1\.5em/gi));
Challenge Seed
<style>
.injected-text {
margin-bottom: -25px;
text-align: center;
}
.box {
border-style: solid;
border-color: black;
border-width: 5px;
text-align: center;
}
.yellow-box {
background-color: yellow;
padding: 20px 40px 20px 40px;
}
.red-box {
background-color: red;
margin: 20px 40px 20px 40px;
}
.green-box {
background-color: green;
margin: 40px 20px 20px 40px;
}
</style>
<h5 class="injected-text">margin</h5>
<div class="box yellow-box">
<h5 class="box red-box">padding</h5>
<h5 class="box green-box">padding</h5>
</div>
Solution
// solution required