freeCodeCamp Applied Visual Design 实战用 CSS height 属性精确控制元素高度【免费下载链接】freeCodeCampfreeCodeCamp.orgs 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 位紧跟在前两道题目之后587d7791367417b2b2512ab3— Create Visual Balance Using the text-align Property用text-align创建视觉平衡587d7791367417b2b2512ab4— Adjust the Width of an Element Using the width Property用width属性调整元素宽度587d7791367417b2b2512ab5—Adjust the Height of an Element Using the height Property本文主题也就是说这是一条先宽后高的学习链条上一题刚刚给卡片.fullCard设置了width: 245px本题则把同一张卡片中h4标题的高度锁定为25px。模块的helpCategory为HTML-CSSblockLayout为legacy-challenge-list说明它属于经典的 HTML/CSS 视觉设计板块。各元数据字段的取值都受到课程校验模式 challenge-schema.js 的约束例如challengeTypeJoi.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类似用来指定元素的高度。原文给出的示例是把一张图片的高度改为 20pximg { height: 20px; }结合上一道width练习的讲解见 587d7791367417b2b2512ab4.mdfreeCodeCamp 对该类尺寸属性取值方式的官方描述是可以使用相对长度单位如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 classfullCard div classcardContent div classcardText h4Google/h4 pGoogle was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University./p /div div classcardLinks a hrefhttps://en.wikipedia.org/wiki/Larry_Page target_blank classlinksLarry Page/a a hrefhttps://en.wikipedia.org/wiki/Sergey_Brin target_blank classlinksSergey 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 classfullCard div classcardContent div classcardText h4Google/h4 pGoogle was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University./p /div div classcardLinks a hrefhttps://en.wikipedia.org/wiki/Larry_Page target_blank classlinksLarry Page/a a hrefhttps://en.wikipedia.org/wiki/Sergey_Brin target_blank classlinksSergey Brin/a /div /div /div这道题的答案会直接沉淀进后续课程下一道练习 Use the strong Tag to Make Text Bold587d781a367417b2b2512ab7.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*}|})/);这里采用了双保险验证运行时 DOM 测量document.querySelector(h4).getBoundingClientRect().height拿到h4在页面中实际渲染出的包围盒高度四舍五入后必须严格等于25。这验证的是渲染结果正确而不是字符串写对了。源码文本正则匹配先从页面中找到非框架注入的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.jsJoi 校验定义与前一道 width 练习 587d7791367417b2b2512ab4.md后者测试中还使用了window.getComputedStyle()读取计算样式是另一种 CSS 验证思路可与本题的getBoundingClientRect()测量方式对照阅读。【免费下载链接】freeCodeCampfreeCodeCamp.orgs open-source codebase and curriculum. Learn math, programming, and computer science for free.项目地址: https://gitcode.com/GitHub_Trending/fr/freeCodeCamp创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考