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

在学习 CSS 的过程中值与单位是决定样式精确性和灵活性的关键知识。颜色值怎么写、字体大小用px还是em、背景图怎么定位这些看似基础的问题实际上直接影响到页面的可维护性、响应式表现和视觉效果。MDN 的Test your skills: Values and units这一节专门通过三个递进式任务帮助我们检验自己对 CSS 值和单位的实际掌握程度。本文将围绕这三个任务展开详细解析从颜色表示法到字体大小单位再到背景定位中的百分比与关键字逐步拆解每个知识点。一、任务一用多种方式表示同一个颜色1.1 任务目标第一个任务给出了一个十六进制颜色值#86defa要求用不同的颜色格式去设置同一列表中多个项目的背景色。具体来说列表项要求颜色格式第一项已给出Hex第二项需完成RGB第三项需完成HSL第四项需完成RGBA透明度 0.6这个任务的核心不是让我们记住某个颜色值而是帮助我们理解 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 更贴近人类对颜色的感知方式。参数说明取值范围色相色轮上的角度0°到360°饱和度颜色的鲜艳程度0%到100%亮度颜色的明暗程度0%到100%#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最直观便于动态计算JavaScript 操作、动态颜色HSL贴近人类感知便于调整明暗主题系统、暗色模式RGBA/HSLA增加透明度控制浮层、卡片、遮罩效果选用建议静态颜色可以用 hex 或 rgb主题色系建议用 hsl需要透明效果时使用 rgba 或 hsla。二、任务二合理使用字体大小单位2.1 任务目标第二个任务要求我们为不同的文本元素设置不同的字体大小元素要求单位h1字体大小50pxpx绝对单位h2字体大小2emem相对单位所有p字体大小16pxpx绝对单位h1后面的p字体大小120%%相对单位这个任务表面上是写几个属性值实际上考察的是对绝对单位和相对单位区别的理解特别是px、em和百分比在不同上下文中的计算方式。合理使用单位可以让页面在不同设备、不同字体设置下保持较好的可读性。2.2 绝对单位px像素是屏幕上最小的显示单元px作为 CSS 单位是一个绝对长度单位。无论在什么设备上50px就表示占据 50 个设备像素的尺寸在高分辨率屏幕下可能涉及设备像素比但 CSS 像素的逻辑含义不变。对于h1使用px可以确保其标题大小固定不受父元素字体大小影响h1{font-size:50px;}✅适用场景在需要精确控制元素尺寸、与图片或固定布局匹配时px是安全且直观的选择。⚠️可访问性注意但大量使用px也会带来可访问性问题因为用户可能无法通过浏览器设置调整字体大小对视力不佳的用户不够友好。因此对于正文文本更推荐使用相对单位。2.3 相对单位emem是一种相对单位其大小相对于当前元素的父元素字体大小进行计算。如果父元素字体大小是16px那么1em就等于16px2em就等于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和百分比各有用途单位类型特点适用场景px绝对单位固定尺寸精确可控标题、固定布局、图片对齐em相对单位随父元素缩放可扩展组件内部、局部上下文缩放%相对单位直观比例随父元素缩放引子段落、相对比例定义rem相对单位随根元素缩放全局一致全局字体基准、响应式排版现代实践很多现代 CSS 方案会使用rem作为全局基准配合px做细节微调而em和百分比则在组件内部扮演灵活缩放的角色。掌握这些单位的计算规则是写出健壮样式的基础。三、任务三背景图的定位与百分比含义3.1 任务目标第三个任务聚焦于背景图片的定位。HTML 结构只有一个div元素初始样式为其设置了边框、高度以及一张紫色星星的背景图并禁用了重复。任务要求更新 CSS让背景图在水平方向上居中在垂直方向上距离盒子顶部 20%的位置。这个任务看似简单却涉及到一个容易混淆的知识点background-position中百分比的计算方式并不是相对于元素本身的宽高而是相对于元素和图片尺寸的差值。3.2 background-position 基本语法background-position属性用来设置背景图像在元素中的起始位置。它接受两个值第一个表示水平位置第二个表示垂直位置。值类型示例说明关键字center、top、bottom、left、right对齐到特定边界长度值px、em精确偏移量百分比20%相对偏移特殊计算规则任务中要实现水平居中和距顶部 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、% 的区别与适用场景任务三背景定位百分比纠正百分比计算方式的常见认知误区第一个任务让我们在 hex、rgb、hsl 和 rgba 之间灵活转换加深了对颜色表示法的理解。第二个任务通过对 px、em 和百分比的运用提醒我们在排版中要关注绝对与相对单位的差异以及它们对可访问性的影响。第三个任务深入到背景定位中百分比的特殊计算规则纠正了一个常见的认知误区。掌握这些基础知识之后无论是处理设计稿还原还是构建可扩展的组件体系都能更加得心应手。CSS 的值与单位是整个样式体系的基石花时间彻底理解它们一定会在未来的开发中不断受益。还在纠结 CSS 样式写得杂乱无章、布局频频踩坑收藏此文持续跟进后续分享 CSS 高效简写、兼容适配方案、经典布局案例、样式避坑干货从基础样式到实战排版一站式学透快速提升前端页面编写能力