企业官网建设流程全解析

freeCodeCamp Applied Visual Design 实战：用 CSS height 属性精确控制元素高度

【免费下载链接】freeCodeCampfreeCodeCamp.org's open-source codebase and curriculum. Learn math, programming, and computer science for free.项目地址: https://gitcode.com/GitHub_Trending/fr/freeCodeCamp

本文基于 freeCodeCamp 课程库（curriculum）中 Applied Visual Design 模块的一道标准练习题展开：如何像使用width属性一样，用 CSS 的height属性指定元素的高度。文章会完整继承该练习的讲解、种子代码、标准答案与测试断言，并结合仓库中的课程结构文件与 Joi 校验模式，深入剖析题目元数据的含义以及测试"如何验证元素真的被设置为 25px"这一底层机制，读完你可以掌握height属性的用法、该练习题的完整实现，以及 freeCodeCamp 前端测试对 CSS 的验证方式。

一、这道练习在课程中的位置

该练习对应的课程文件为：

curriculum/challenges/english/blocks/applied-visual-design/587d7791367417b2b2512ab5.md

其 frontmatter 元数据如下：

id: 587d7791367417b2b2512ab5 title: Adjust the Height of an Element Using the height Property challengeType: 0 videoUrl: 'https://scrimba.com/c/cEDaDTN' forumTopicId: 301034 dashedName: adjust-the-height-of-an-element-using-the-height-property

在模块结构文件 applied-visual-design.json 的challengeOrder中，该练习排第 3 位，紧跟在前两道题目之后：

1. 587d7791367417b2b2512ab3— Create Visual Balance Using the text-align Property（用text-align创建视觉平衡）
2. 587d7791367417b2b2512ab4— Adjust the Width of an Element Using the width Property（用width属性调整元素宽度）
3. 587d7791367417b2b2512ab5—Adjust the Height of an Element Using the height Property（本文主题）

也就是说，这是一条"先宽后高"的学习链条：上一题刚刚给卡片.fullCard设置了width: 245px，本题则把同一张卡片中h4标题的高度锁定为25px。模块的helpCategory为HTML-CSS，blockLayout为legacy-challenge-list，说明它属于经典的 HTML/CSS 视觉设计板块。

各元数据字段的取值都受到课程校验模式 challenge-schema.js 的约束，例如：

• challengeType：Joi.number().min(0).max(33).required()，本题取值为0，即普通练习型挑战（非项目、非测验）；
• dashedName：必须匹配^[a-z0-9-]+$的 slug 格式，用于生成可读的 URL 路径（见 challenge-schema.js 第 19 行 定义的slugRE与 第 182 行 的校验）；
• videoUrl：允许为空字符串的字符串，指向配套讲解视频；
• forumTopicId：数字类型，关联课程官方论坛中对应主题的讨论帖编号（本题为 301034），便于学习者在线求助。

二、核心知识点：CSS 的 height 属性

原文档的讲解原文是：

You can specify the height of an element using theheightproperty in CSS, similar to thewidthproperty.

即：height属性的用法与width类似，用来指定元素的高度。原文给出的示例是把一张图片的高度改为 20px：

img { height: 20px; }

结合上一道width练习的讲解（见 587d7791367417b2b2512ab4.md），freeCodeCamp 对该类尺寸属性取值方式的官方描述是：可以使用相对长度单位（如em）、绝对长度单位（如px），或者相对于父容器的百分比。height与width遵循同一套取值体系：

• px：绝对长度单位，浏览器布局计算时最精确，适合需要像素级对齐的场景（本题正是这种场景）；
• %：相对于包含块（containing parent）对应方向的尺寸；
• em/rem：相对字体大小的单位，常用于随字号缩放的布局；
• auto：不显式指定，由内容、行高或替换元素（如图片）的固有比例决定。

一个需要理解的 CSS 基础事实是：height默认只控制内容框（content box）的高度。在默认box-sizing: content-box下，元素的实际占据高度 = 内容高度 + 上下 padding + 上下 border。因此当height值小于内容自然撑开的高度时，内容不会"缩小"，而是溢出（overflow）内容框——这正是本题中h4设为 25px 后仍能看到完整文字的原因。

三、完整练习：Google 个人资料卡片

本题的种子代码（# --seed-contents--部分）是一个模拟 Google 创始人资料卡的 HTML/CSS 片段。注意它已经包含了前两道练习的成果：h4上有text-align: center，.fullCard上有width: 245px。完整的种子代码是：

<style> h4 { text-align: center; } p { text-align: justify; } .links { margin-right: 20px; text-align: left; } .fullCard { width: 245px; border: 1px solid #ccc; border-radius: 5px; margin: 10px 5px; padding: 4px; } .cardContent { padding: 10px; } </style> <div class="fullCard"> <div class="cardContent"> <div class="cardText"> <h4>Google</h4> <p>Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.</p> </div> <div class="cardLinks"> <a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a> <a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a> </div> </div> </div>

题目要求（instructions）：给h4标签添加一个height属性，并把它设置为25px。

注意事项（Note）：要通过本题测试，浏览器缩放需要保持在 100%（这一点在下文测试分析中解释原因）。

四、标准答案

在h4规则中新增一行height: 25px;即可，完整答案如下（与种子代码的差异仅有标注的一行）：

<style> h4 { text-align: center; height: 25px; /* 本题要求新增的一行 */ } p { text-align: justify; } .links { margin-right: 20px; text-align: left; } .fullCard { width: 245px; border: 1px solid #ccc; border-radius: 5px; margin: 10px 5px; padding: 4px; } .cardContent { padding: 10px; } </style> <div class="fullCard"> <div class="cardContent"> <div class="cardText"> <h4>Google</h4> <p>Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.</p> </div> <div class="cardLinks"> <a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a> <a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a> </div> </div> </div>

这道题的答案会直接"沉淀"进后续课程：下一道练习 Use the strong Tag to Make Text Bold（587d781a367417b2b2512ab7.md）的种子代码中，h4规则已经带有height: 25px;——freeCodeCamp 的练习序列就是这样通过逐题累积 CSS 规则，把一张卡片一步步搭建成完整样式的。

五、测试实现剖析：如何验证元素"真的"是 25px 高

本题的测试断言（位于源文件的# --hints--区块）是理解 freeCodeCamp 前端测试机制的极佳样本：

const spaceFreeText = document.querySelector("style:not(.fcc-hide-header)")?.textContent?.replace(/\s/g, ''); const h4Element = document.querySelector('h4'); assert.equal(Math.round(h4Element?.getBoundingClientRect()?.height), 25); assert.match(spaceFreeText, /h4{\S*height:25px(;\S*}|})/);

这里采用了双保险验证：

1. 运行时 DOM 测量：document.querySelector('h4').getBoundingClientRect().height拿到h4在页面中实际渲染出的包围盒高度，四舍五入后必须严格等于25。这验证的是"渲染结果正确"，而不是"字符串写对了"。
2. 源码文本正则匹配：先从页面中找到"非框架注入"的<style>元素，去掉全部空白字符（replace(/\s/g, '')）后，用正则/h4{\S*height:25px(;\S*}|})/匹配。这条正则要求样式表中存在一条h4选择器规则，规则体内包含height:25px，且其后紧跟;...}或}——即height声明完整、位于规则体末尾附近。这验证的是"CSS 文本确实由学习者在样式块里写入了该声明"。

为什么选择器要写成style:not(.fcc-hide-header)？这与 freeCodeCamp 客户端的挑战运行框架直接相关。挑战代码运行在一个隔离的 iframe 中，框架会向 iframe 头部注入一段隐藏头部元素的样式，并特意给该<style>元素加上fcc-hide-header类。frame.ts 第 105–115 行 的注释明确写道："The 'fcc-hide-header' class ... is added to ensure that the CSSHelper class ignores this style element during tests, preventing CSS-related test failures." 也就是说，测试通过:not(.fcc-hide-header)把框架自身的样式排除在外，只检查学习者编写的样式块，避免误判。

六、为什么必须保持 100% 浏览器缩放

题目中的 Note 提示"可能需要在 100% 缩放下才能通过测试"。结合断言代码可以推断其原因：第一条断言比较的是Math.round(getBoundingClientRect().height)与25。getBoundingClientRect()返回的是受浏览器页面缩放影响的视口坐标系下的尺寸——缩放比例改变时，同一个 CSS 像素的测量值会随之等比变化，四舍五入的结果就不再保证恰好是25。而正则断言只检查文本，不受影响。因此只有 DOM 测量这一关对缩放敏感，保持 100% 缩放能确保25px声明测量出来恰好是25。

这也从侧面说明了像素级断言类测试的局限：它对运行环境（缩放、字体度量）敏感。freeCodeCamp 对此的工程应对是Math.round()容差 + 明确的缩放提示，而非放弃精确测量。

七、小结与延伸

• height属性与width取值体系一致（px、%、em等），默认作用于内容框，内容超高时溢出而非压缩；
• 本题在 applied-visual-design.json 定义的模块序列中承上启下：前接text-align与width，其答案（h4 { height: 25px; }）成为后续strong、u等文本样式练习种子代码的一部分；
• 想进一步理解题目文件格式，可阅读 challenge-schema.js（Joi 校验定义）与前一道 width 练习 587d7791367417b2b2512ab4.md，后者测试中还使用了window.getComputedStyle()读取计算样式，是另一种 CSS 验证思路，可与本题的getBoundingClientRect()测量方式对照阅读。

【免费下载链接】freeCodeCampfreeCodeCamp.org's open-source codebase and curriculum. Learn math, programming, and computer science for free.项目地址: https://gitcode.com/GitHub_Trending/fr/freeCodeCamp