跟着 MDN 学CSS day_12 ：（值与单位的技能测试与深入理解）

在学习 CSS 的过程中，值与单位是决定样式精确性和灵活性的关键知识。颜色值怎么写、字体大小用px还是em、背景图怎么定位，这些看似基础的问题，实际上直接影响到页面的可维护性、响应式表现和视觉效果。MDN 的"Test your skills: Values and units"这一节，专门通过三个递进式任务帮助我们检验自己对 CSS 值和单位的实际掌握程度。

本文将围绕这三个任务展开详细解析，从颜色表示法，到字体大小单位，再到背景定位中的百分比与关键字，逐步拆解每个知识点。

一、任务一：用多种方式表示同一个颜色

1.1 任务目标

第一个任务给出了一个十六进制颜色值#86defa，要求用不同的颜色格式去设置同一列表中多个项目的背景色。具体来说：

这个任务的核心不是让我们记住某个颜色值，而是帮助我们理解 CSS 中颜色的多种表示方式以及它们之间的转换关系。在实际开发中，我们经常需要根据设计稿、动态交互或可访问性要求，在不同格式之间切换。

1.2 十六进制颜色

十六进制颜色是 CSS 中最常见的一种表示方式，以#开头，后面跟随六位或三位十六进制字符。例如#86defa就是六位格式，分别表示红、绿、蓝三个通道的亮度。每一位取值从0到F，两位组合的范围是00到FF，对应十进制的0到255。

使用十六进制颜色时，代码非常简洁，容易复制和记忆，因此被大量用于静态样式。任务起始代码中已经给出了 hex 颜色的用法：

.hex{background-color:#86defa;}

这种写法对所有支持 CSS 的浏览器都兼容，是颜色定义的基础方式之一。

1.3 RGB 颜色

RGB 颜色通过函数rgb()来表示，括号内三个参数分别对应红、绿、蓝三个通道的数值，取值范围是0到255。

根据转换，#86defa的：

• 红色通道86→ 十进制134
• 绿色通道de→ 十进制222
• 蓝色通道fa→ 十进制250

因此第二项的背景色可以写成：

.rgb{background-color:rgb(134,222,250);}

💡优势：RGB 写法的好处是直观，可以一眼看出三个原色通道的混合比例。对于需要动态修改颜色的场景，JavaScript 也更容易操作 RGB 数值。此外，现代 CSS 还支持rgb()的新语法，允许使用逗号或空格分隔，同时支持百分比表示，但这里我们使用最传统的写法以保持最广泛的兼容性。

1.4 HSL 颜色

HSL 是另一种颜色模式，表示色相（Hue）、饱和度（Saturation）和亮度（Lightness）。相比 RGB 更贴近人类对颜色的感知方式。

#86defa转换为 HSL 大致为：色相195 度，饱和度93%，亮度75%。第三个列表项的背景色可以定义为：

.hsl{background-color:hsl(195,93%,75%);}

🎯应用场景：HSL 的优势在于，当我们需要整体调整颜色的鲜艳程度或明暗程度时，只需修改饱和度和亮度，而色相保持不变。这在构建主题系统、暗色模式或 hover 状态时非常有用，因为我们可以保持色调统一，仅改变同一颜色的明暗层级。

1.5 带透明度的 RGB 颜色

第四个任务要求将背景设置为半透明，alpha 值为0.6。CSS 提供了rgba()函数，在 RGB 的基础上增加第四个参数，用于控制不透明度，取值在0到1之间，0为完全透明，1为完全不透明。

第四项样式可以写成：

.transparency{background-color:rgba(134,222,250,0.6);}

🔍关键区别：使用 alpha 通道可以让背景图或其他下层元素透过半透明背景显示出来，这种技术在浮层、卡片、遮罩等场景中非常常见。与opacity属性不同的是，rgba或hsla只影响当前元素的背景色透明度，而不会影响其内部文字或子元素，这就给了我们更精确的控制能力。

1.6 颜色格式对比总结

通过这一个任务，我们实际练习了 hex、rgb、hsl 和 rgba 四种颜色表示方法：

💡选用建议：静态颜色可以用 hex 或 rgb，主题色系建议用 hsl，需要透明效果时使用 rgba 或 hsla。

二、任务二：合理使用字体大小单位

2.1 任务目标

第二个任务要求我们为不同的文本元素设置不同的字体大小：

这个任务表面上是写几个属性值，实际上考察的是对绝对单位和相对单位区别的理解，特别是px、em和百分比在不同上下文中的计算方式。合理使用单位，可以让页面在不同设备、不同字体设置下保持较好的可读性。

2.2 绝对单位：px

像素是屏幕上最小的显示单元，px作为 CSS 单位，是一个绝对长度单位。无论在什么设备上，50px就表示占据 50 个设备像素的尺寸（在高分辨率屏幕下可能涉及设备像素比，但 CSS 像素的逻辑含义不变）。

对于h1，使用px可以确保其标题大小固定，不受父元素字体大小影响：

h1{font-size:50px;}

✅适用场景：在需要精确控制元素尺寸、与图片或固定布局匹配时，px是安全且直观的选择。

⚠️可访问性注意：但大量使用px也会带来可访问性问题，因为用户可能无法通过浏览器设置调整字体大小，对视力不佳的用户不够友好。因此，对于正文文本，更推荐使用相对单位。

2.3 相对单位：em

em是一种相对单位，其大小相对于当前元素的父元素字体大小进行计算。如果父元素字体大小是16px，那么1em就等于16px，2em就等于32px。

任务中要求h2字体大小为2em，如果它的父元素是body，而body没有显式指定字体大小时，浏览器默认通常是16px，因此2em将呈现为32px。

h2{font-size:2em;}

🎯优势：em的一大优势在于，它可以随上下文缩放。如果将整个模块的字体大小从16px调整到20px，那么所有使用em的元素都会等比例放大，从而保持设计的层级关系。这种特性在构建可扩展的组件时非常重要。

⚠️复合效应：同时需要注意em的复合效应。如果元素嵌套多层，每一层都使用em并基于父元素计算，就可能出现意料之外的放大或缩小效果。因此，对于全局字体大小控制，更多开发者选择使用rem，而em更适合用在需要跟随局部上下文缩放的场景。

2.4 基础正文大小与可读性

对于p元素，任务要求统一设为16px。16px是桌面端正文阅读比较舒适的默认尺寸，适合大多数屏幕，也符合很多设计规范的基线标准。

p{font-size:16px;}

📝响应式考量：把所有正文段落固定为16px，可以保证正文阅读体验的一致性。但在响应式设计中，也可能在小屏幕上将其调整为更小一些的尺寸，或使用相对单位以便整体缩放。这里使用px是为了满足任务的明确要求，实际项目中需要结合响应式策略权衡。

2.5 百分比单位与上下文关系

任务中还有一个特别的要求：直接位于h1之后的p元素，字体大小设置为120%。百分比单位同样是相对单位，它相对于父元素的字体大小进行计算。120%表示字体大小是父元素字体大小的1.2倍。

这段样式可以使用相邻兄弟选择器来精确匹配：

h1 + p{font-size:120%;}

🧮计算示例：假设body的字体大小是默认的16px（起始代码中body设置了font: 1.2em / 1.5 sans-serif，因此实际大约为19.2px），那么120%就是约23px。这个大小介于h1和普通p之间，可以在视觉上起到引子段落或导语的作用，让文章层级更丰富。

💡百分比优势：使用百分比的好处是它和em一样会随着父元素缩放，数值也更直观。无论是em还是百分比，关键在于弄清楚它的参照物是谁，这样才能在不同的 DOM 结构中准确控制最终计算值。

2.6 字体大小单位选用建议

通过任务二，我们可以看到px、em和百分比各有用途：

🎯现代实践：很多现代 CSS 方案会使用rem作为全局基准，配合px做细节微调，而em和百分比则在组件内部扮演灵活缩放的角色。掌握这些单位的计算规则，是写出健壮样式的基础。

三、任务三：背景图的定位与百分比含义

3.1 任务目标

第三个任务聚焦于背景图片的定位。HTML 结构只有一个div元素，初始样式为其设置了边框、高度，以及一张紫色星星的背景图，并禁用了重复。任务要求更新 CSS，让背景图在水平方向上居中，在垂直方向上距离盒子顶部 20%的位置。

这个任务看似简单，却涉及到一个容易混淆的知识点：background-position中百分比的计算方式并不是相对于元素本身的宽高，而是相对于元素和图片尺寸的差值。

3.2 background-position 基本语法

background-position属性用来设置背景图像在元素中的起始位置。它接受两个值，第一个表示水平位置，第二个表示垂直位置。

任务中要实现水平居中和距顶部 20%，最直接的写法是：

.box{background-image:url("https://mdn.github.io/shared-assets/images/examples/purple-star.png");background-repeat:no-repeat;background-position:center top 20%;}

📝现代语法：这里出现了比较现代的写法。在 CSS 中，我们可以使用关键字和百分比组合来精确定义偏移。center表示水平居中，top 20%表示从顶部开始算，偏移元素高度的 20% 作为图片的起始位置。

3.3 百分比在背景定位中的计算逻辑

理解这里的20%到底是怎么计算的，是任务三最重要的知识点。很多开发者一开始会以为20%意味着图片的顶部位于元素高度的20%处，但实际情况更复杂。

🧮计算公式：

对于background-position，百分比的计算公式是：

• 水平方向：(元素宽度 - 图片宽度) × 百分比
• 垂直方向：(元素高度 - 图片高度) × 百分比

因此，如果背景图尺寸与元素一致，那么任何百分比都会让图片与元素完全对齐，此时百分比没有效果。当图片比元素小，百分比才会产生明显的偏移。

📐计算示例：假设元素高度为350px，图片高度为200px，差值为150px。如果设置background-position垂直方向为20%：

• 图片的偏移量 =150px × 20% = 30px
• 这意味着图片顶部会距离元素顶部30px
• 而不是元素高度的20%（即70px）

这是很多开发者容易误解的地方。

因此，要实现视觉上距离顶部 20% 的需求，实际上需要根据图片尺寸与元素尺寸进行换算。如果直接写top 20%，现代浏览器会根据背景定位的新语法正确计算出我们想要的效果，但理解其底层逻辑对于处理复杂场景依然很重要。

3.4 背景定位的另一种写法

对于更简单的场景，也可以使用calc或长度值精确控制偏移。例如如果想要图片顶部确实距离元素顶部 20%，且我们知道元素高度，就可以算出具体像素值后直接设定。但这样做牺牲了灵活性，在元素尺寸变化时无法自适应。使用百分比和关键字的组合，则可以让定位在不同尺寸下保持相对一致。

实际完成的样式可能如下：

.box{border:5px solid black;height:350px;background-image:url("https://mdn.github.io/shared-assets/images/examples/purple-star.png");background-repeat:no-repeat;background-position:center top 20%;}

🎯效果说明：在这个样式下，背景图会始终水平居中，垂直方向根据20%的规则进行偏移，最终呈现出整洁且符合设计预期的效果。

3.5 背景定位在实际开发中的延伸

背景定位在页面装饰、图标定位、插图布局等场景中大量使用。掌握百分比的计算方式，能帮助我们精确控制背景图的展示区域。此外，结合background-size属性，还可以实现更多复杂效果，比如将背景图缩放后再定位。

当使用background-size: cover或contain时，图片尺寸不再固定，background-position的百分比计算也会相应变化。因此，在设计具有响应式背景的组件时，需要同时考虑尺寸与定位的配合。任务三虽然只是简单的一次定位练习，但为更复杂的背景处理打下了重要的基础。

四、总结

通过这三个技能测试任务，我们从颜色值、字体大小单位，到背景定位百分比，系统地复习了 CSS 中值与单位的关键概念：

🎯第一个任务让我们在 hex、rgb、hsl 和 rgba 之间灵活转换，加深了对颜色表示法的理解。

🎯第二个任务通过对 px、em 和百分比的运用，提醒我们在排版中要关注绝对与相对单位的差异以及它们对可访问性的影响。

🎯第三个任务深入到背景定位中百分比的特殊计算规则，纠正了一个常见的认知误区。

掌握这些基础知识之后，无论是处理设计稿还原，还是构建可扩展的组件体系，都能更加得心应手。CSS 的值与单位是整个样式体系的基石，花时间彻底理解它们，一定会在未来的开发中不断受益。

还在纠结 CSS 样式写得杂乱无章、布局频频踩坑？收藏此文持续跟进，后续分享 CSS 高效简写、兼容适配方案、经典布局案例、样式避坑干货，从基础样式到实战排版一站式学透，快速提升前端页面编写能力！