尧图网页设计 
freeCodeCamp Basic CSS 挑战解析Adjust the Margin of an Element —— 从入门理解到自动化验证【免费下载链接】freeCodeCampfreeCodeCamp.orgs open-source codebase and curriculum. Learn math, programming, and computer science for free.项目地址: https://gitcode.com/GitHub_Trending/fr/freeCodeCamp本文围绕 freeCodeCamp 开源仓库中 Basic CSS 课程区块basic-cssblock的一道入门挑战Adjust the Margin of an Element展开系统讲解 CSSmargin属性的作用机制与盒模型中的定位并逐行剖析该挑战 Markdown 文档frontmatter、描述、seed 初始代码、hints 自动化测试与官方 solution在仓库中的真实结构与实现。读完本文你将既能学会如何正确调整元素的margin也能理解 freeCodeCamp 的课程挑战文件是如何通过window.getComputedStyle等断言被自动校验的。课程中该挑战的定位该挑战的源文件位于 curriculum/challenges/english/blocks/basic-css/bad87fee1348bd9aedf08822.md是全英文官方课程freeCodeCamp 课程体系采用challenges/english为主干、其余语言经 curriculum/i18n-curriculum 翻译的组织方式中Basic CSS区块的一环。从 curriculum/structure/blocks/basic-css.json 中的challengeOrder第 70~73 行可以看到该挑战被精确编排在如下序列中挑战主题bad88fee1348bd9aedf08825Adjust the Padding of an Elementbad87fee1348bd9aedf08822Adjust the Margin of an Elementbad87fee1348bd9aedf08823Add a Negative Margin to an Elementbad87fee1348bd9aedf08824Add Different Margins to Each Side of an Elementbad87fee1348bd9afdf08726Use Clockwise Notation to Specify the Margin of an Element也就是说学习者先学会调整元素内部的padding再学会调整元素外部的margin随后依次接触负外边距、逐边设置以及顺时针简写构成一条完整的盒模型间距学习链。本文所处的这一题正是其中承接padding、开启margin认知的关键一课。挑战文档的 frontmatter挑战即数据freeCodeCamp 的每个挑战本质上是一个带 frontmatter 的 Markdown 文档。本文件的 YAML 头如下--- id: bad87fee1348bd9aedf08822 title: Adjust the Margin of an Element challengeType: 0 videoUrl: https://scrimba.com/c/cVJarHW forumTopicId: 16654 dashedName: adjust-the-margin-of-an-element ---各字段的意义分别为id挑战的唯一标识ObjectId 格式后续构建学习地图、存取进度都依赖它title页面标题同时会被 curriculum/structure/blocks/basic-css.json 的challengeOrder引用challengeType挑战类型编号0代表经典的 HTML/CSS 网页类挑战videoUrl可选的视频讲解链接本挑战挂接了 Scrimba 讲解视频forumTopicId关联论坛讨论帖 IDdashedNameURL 友好的英文短名。从仓库的 curriculum/schema/challenge-schema.js 可以看到这些字段并非随意书写而是受到 Joi 模式的强校验id要求为合法的 ObjectId 且必填第 36 行title必填第 37 行challengeType必须是 033 之间的数字第 180 行dashedName需匹配 slug 正则第 182 行videoUrl允许为空字符串第 241 行。也就是说这类.md文档与结构 JSON、schema 校验代码共同构成了可机器验证的课程数据源。核心概念margin 控制的是什么空间挑战的# --description--部分给出了对margin最精炼的定义An elementsmargincontrols the amount of space between an elementsborderand surrounding elements.翻译过来就是margin外边距控制的是元素border边框与周围元素之间的距离。它是 CSS 标准盒模型content → padding → border → margin由内向外中最外层的一环content——内容区padding——边框与内容之间的内边距border——元素的边框margin——边框之外、用于隔开相邻元素的外边距。因此一个元素设置margin后并不会改变它自身的占地内容而是通过扩大与邻近元素的间距在视觉上产生更小的存在感。这正是题目描述中强调的外层黄色盒子中嵌套着红、蓝两个盒子红色盒子的margin更大看起来就更小、与黄色盒子边缘更疏远。任务让蓝盒子的 margin 追上红盒子挑战指令非常直接Change themarginof the blue box to match that of the red box.也就是把.blue-box的margin调整到与.red-box一致20px。理解这一步的关键是 seed 中提供的 HTML/CSS 结构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: 10px; } .red-box { background-color: crimson; color: #fff; padding: 20px; margin: 20px; } .blue-box { background-color: blue; color: #fff; padding: 20px; margin: 10px; } /style h5 classinjected-textmargin/h5 div classbox yellow-box h5 classbox red-boxpadding/h5 h5 classbox blue-boxpadding/h5 /div这段演示代码值得逐层拆解.yellow-box同时应用了border-style/border-color/border-width来自.box与黄色背景、padding: 10px扮演容器角色.red-box与.blue-box是两个嵌套在黄色容器内的子元素各自有padding: 20px以撑大自身、白色文字以便区分底色两者唯一的关键差异就在margin红盒子margin: 20px蓝盒子margin: 10px。所以当学习者把蓝盒子的margin由10px改为20px后蓝色盒子的边框会离其所在容器的内边缘更远视觉大小外围所占空间与红盒子保持一致。这里的margin: 20px是四向简写等价于同时为margin-top/right/bottom/left设置20px。值得一提的细节是.injected-text { margin-bottom: -25px; }它利用负外边距把说明文字 margin 向上吸附这与下一道挑战 Add a Negative Margin to an Element 形成呼应。Hints自动化断言如何检验 margin与许多只靠肉眼对比的教程不同freeCodeCamp 的挑战自带可执行的测试# --hints--本挑战只有一条断言const blueBox document.querySelector(.blue-box); const marginTop window.getComputedStyle(blueBox)[margin-top]; assert.strictEqual(marginTop, 20px);其校验思路是用document.querySelector(.blue-box)选中蓝盒子通过window.getComputedStyle(blueBox)读取浏览器最终计算后的样式表断言计算后的margin-top恰好等于20px。getComputedStyle取的是级联与计算完成后的实际值因此即便学习者采用margin: 20px 20px;、margin-top: 20px或四条分写等不同写法只要最终计算出的上边距为 20px 就能通过——这体现了课程以结果正确性为准的自动判题哲学。可以在 curriculum/challenges/english/blocks/basic-css/bad87fed1348bd9aede07836.md 等相邻挑战中看到同类window.getComputedStyle断言在颜色、背景等属性校验上的复用例如校验background-color时直接断言计算值为rgb(192, 192, 192)。需要说明的是getComputedStyle返回的值会将颜色归一化为rgb(...)形式、长度归一到以px为后缀的字符串这也是断言里使用strictEqual(marginTop, 20px)而非数字20的原因。官方解法Solution仓库在每个挑战的# --solutions--段给出了标准答案。对本挑战而言唯一改动就是把.blue-box的 margin 对齐红盒子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: 10px; } .red-box { background-color: crimson; color: #fff; padding: 20px; margin: 20px; } .blue-box { background-color: blue; color: #fff; padding: 20px; margin: 20px; } /style h5 classinjected-textmargin/h5 div classbox yellow-box h5 classbox red-boxpadding/h5 h5 classbox blue-boxpadding/h5 /div对比 seed唯一差异为.blue-box的margin由10px变为20px。这也再次印证margin是元素边框与周边元素间的距离调大它不会改变元素内容与 padding只会让元素在布局中退后看起来更小、间距更大。margin 的进阶形态逐边与简写掌握四边等值的margin: 20px写法后同一区块接下来的挑战帮助学习者覆盖两种进阶语法逐边设置在 Add Different Margins to Each Side of an Element 中通过margin-top、margin-right、margin-bottom、margin-left分别控制四个方向互不影响顺时针简写在 Use Clockwise Notation to Specify the Margin of an Element 中把上、右、下、左四条值浓缩为形如margin: 10px 20px 30px 40px;的顺时针缩写分别对应 top → right → bottom → left。配合稍早的 Adjust the Padding of an Element学习者至此就能完整地驾驭盒模型的padding与margin前者向内撑大后者向外推开。结语通过本挑战可以同时收获两层认识其一作为 CSS 学习者理解了margin在盒模型中的位置——它是元素边框外侧与相邻元素之间那段可调节的空白调节它会直接影响元素在页面布局中的间距与观感其二作为开源仓库的阅读者看到了 freeCodeCamp 如何把一道题拆解为描述、指令、可执行断言与参考答案四段式结构并用 Joi schema 校验 frontmatter、用challengeOrder决定授课顺序。如果想进一步验证相关约定可继续阅读 curriculum/structure/blocks/basic-css.json课程编排、curriculum/schema/challenge-schema.js挑战文件字段校验以及curriculum/challenges/english/blocks/basic-css/目录下围绕 margin/padding 的其他挑战源文件。【免费下载链接】freeCodeCampfreeCodeCamp.orgs open-source codebase and curriculum. Learn math, programming, and computer science for free.项目地址: https://gitcode.com/GitHub_Trending/fr/freeCodeCamp创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 freeCodeCamp Basic CSS 挑战解析：Adjust the Margin of an Element —— 从入门理解到自动化验证
freeCodeCamp Basic CSS 挑战解析Adjust the Margin of an Element —— 从入门理解到自动化验证【免费下载链接】freeCodeCampfreeCodeCamp.orgs open-source codebase and curriculum. Learn math, programming, and computer science for free.项目地址: https://gitcode.com/GitHub_Trending/fr/freeCodeCamp本文围绕 freeCodeCamp 开源仓库中 Basic CSS 课程区块basic-cssblock的一道入门挑战Adjust the Margin of an Element展开系统讲解 CSSmargin属性的作用机制与盒模型中的定位并逐行剖析该挑战 Markdown 文档frontmatter、描述、seed 初始代码、hints 自动化测试与官方 solution在仓库中的真实结构与实现。读完本文你将既能学会如何正确调整元素的margin也能理解 freeCodeCamp 的课程挑战文件是如何通过window.getComputedStyle等断言被自动校验的。课程中该挑战的定位该挑战的源文件位于 curriculum/challenges/english/blocks/basic-css/bad87fee1348bd9aedf08822.md是全英文官方课程freeCodeCamp 课程体系采用challenges/english为主干、其余语言经 curriculum/i18n-curriculum 翻译的组织方式中Basic CSS区块的一环。从 curriculum/structure/blocks/basic-css.json 中的challengeOrder第 70~73 行可以看到该挑战被精确编排在如下序列中挑战主题bad88fee1348bd9aedf08825Adjust the Padding of an Elementbad87fee1348bd9aedf08822Adjust the Margin of an Elementbad87fee1348bd9aedf08823Add a Negative Margin to an Elementbad87fee1348bd9aedf08824Add Different Margins to Each Side of an Elementbad87fee1348bd9afdf08726Use Clockwise Notation to Specify the Margin of an Element也就是说学习者先学会调整元素内部的padding再学会调整元素外部的margin随后依次接触负外边距、逐边设置以及顺时针简写构成一条完整的盒模型间距学习链。本文所处的这一题正是其中承接padding、开启margin认知的关键一课。挑战文档的 frontmatter挑战即数据freeCodeCamp 的每个挑战本质上是一个带 frontmatter 的 Markdown 文档。本文件的 YAML 头如下--- id: bad87fee1348bd9aedf08822 title: Adjust the Margin of an Element challengeType: 0 videoUrl: https://scrimba.com/c/cVJarHW forumTopicId: 16654 dashedName: adjust-the-margin-of-an-element ---各字段的意义分别为id挑战的唯一标识ObjectId 格式后续构建学习地图、存取进度都依赖它title页面标题同时会被 curriculum/structure/blocks/basic-css.json 的challengeOrder引用challengeType挑战类型编号0代表经典的 HTML/CSS 网页类挑战videoUrl可选的视频讲解链接本挑战挂接了 Scrimba 讲解视频forumTopicId关联论坛讨论帖 IDdashedNameURL 友好的英文短名。从仓库的 curriculum/schema/challenge-schema.js 可以看到这些字段并非随意书写而是受到 Joi 模式的强校验id要求为合法的 ObjectId 且必填第 36 行title必填第 37 行challengeType必须是 033 之间的数字第 180 行dashedName需匹配 slug 正则第 182 行videoUrl允许为空字符串第 241 行。也就是说这类.md文档与结构 JSON、schema 校验代码共同构成了可机器验证的课程数据源。核心概念margin 控制的是什么空间挑战的# --description--部分给出了对margin最精炼的定义An elementsmargincontrols the amount of space between an elementsborderand surrounding elements.翻译过来就是margin外边距控制的是元素border边框与周围元素之间的距离。它是 CSS 标准盒模型content → padding → border → margin由内向外中最外层的一环content——内容区padding——边框与内容之间的内边距border——元素的边框margin——边框之外、用于隔开相邻元素的外边距。因此一个元素设置margin后并不会改变它自身的占地内容而是通过扩大与邻近元素的间距在视觉上产生更小的存在感。这正是题目描述中强调的外层黄色盒子中嵌套着红、蓝两个盒子红色盒子的margin更大看起来就更小、与黄色盒子边缘更疏远。任务让蓝盒子的 margin 追上红盒子挑战指令非常直接Change themarginof the blue box to match that of the red box.也就是把.blue-box的margin调整到与.red-box一致20px。理解这一步的关键是 seed 中提供的 HTML/CSS 结构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: 10px; } .red-box { background-color: crimson; color: #fff; padding: 20px; margin: 20px; } .blue-box { background-color: blue; color: #fff; padding: 20px; margin: 10px; } /style h5 classinjected-textmargin/h5 div classbox yellow-box h5 classbox red-boxpadding/h5 h5 classbox blue-boxpadding/h5 /div这段演示代码值得逐层拆解.yellow-box同时应用了border-style/border-color/border-width来自.box与黄色背景、padding: 10px扮演容器角色.red-box与.blue-box是两个嵌套在黄色容器内的子元素各自有padding: 20px以撑大自身、白色文字以便区分底色两者唯一的关键差异就在margin红盒子margin: 20px蓝盒子margin: 10px。所以当学习者把蓝盒子的margin由10px改为20px后蓝色盒子的边框会离其所在容器的内边缘更远视觉大小外围所占空间与红盒子保持一致。这里的margin: 20px是四向简写等价于同时为margin-top/right/bottom/left设置20px。值得一提的细节是.injected-text { margin-bottom: -25px; }它利用负外边距把说明文字 margin 向上吸附这与下一道挑战 Add a Negative Margin to an Element 形成呼应。Hints自动化断言如何检验 margin与许多只靠肉眼对比的教程不同freeCodeCamp 的挑战自带可执行的测试# --hints--本挑战只有一条断言const blueBox document.querySelector(.blue-box); const marginTop window.getComputedStyle(blueBox)[margin-top]; assert.strictEqual(marginTop, 20px);其校验思路是用document.querySelector(.blue-box)选中蓝盒子通过window.getComputedStyle(blueBox)读取浏览器最终计算后的样式表断言计算后的margin-top恰好等于20px。getComputedStyle取的是级联与计算完成后的实际值因此即便学习者采用margin: 20px 20px;、margin-top: 20px或四条分写等不同写法只要最终计算出的上边距为 20px 就能通过——这体现了课程以结果正确性为准的自动判题哲学。可以在 curriculum/challenges/english/blocks/basic-css/bad87fed1348bd9aede07836.md 等相邻挑战中看到同类window.getComputedStyle断言在颜色、背景等属性校验上的复用例如校验background-color时直接断言计算值为rgb(192, 192, 192)。需要说明的是getComputedStyle返回的值会将颜色归一化为rgb(...)形式、长度归一到以px为后缀的字符串这也是断言里使用strictEqual(marginTop, 20px)而非数字20的原因。官方解法Solution仓库在每个挑战的# --solutions--段给出了标准答案。对本挑战而言唯一改动就是把.blue-box的 margin 对齐红盒子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: 10px; } .red-box { background-color: crimson; color: #fff; padding: 20px; margin: 20px; } .blue-box { background-color: blue; color: #fff; padding: 20px; margin: 20px; } /style h5 classinjected-textmargin/h5 div classbox yellow-box h5 classbox red-boxpadding/h5 h5 classbox blue-boxpadding/h5 /div对比 seed唯一差异为.blue-box的margin由10px变为20px。这也再次印证margin是元素边框与周边元素间的距离调大它不会改变元素内容与 padding只会让元素在布局中退后看起来更小、间距更大。margin 的进阶形态逐边与简写掌握四边等值的margin: 20px写法后同一区块接下来的挑战帮助学习者覆盖两种进阶语法逐边设置在 Add Different Margins to Each Side of an Element 中通过margin-top、margin-right、margin-bottom、margin-left分别控制四个方向互不影响顺时针简写在 Use Clockwise Notation to Specify the Margin of an Element 中把上、右、下、左四条值浓缩为形如margin: 10px 20px 30px 40px;的顺时针缩写分别对应 top → right → bottom → left。配合稍早的 Adjust the Padding of an Element学习者至此就能完整地驾驭盒模型的padding与margin前者向内撑大后者向外推开。结语通过本挑战可以同时收获两层认识其一作为 CSS 学习者理解了margin在盒模型中的位置——它是元素边框外侧与相邻元素之间那段可调节的空白调节它会直接影响元素在页面布局中的间距与观感其二作为开源仓库的阅读者看到了 freeCodeCamp 如何把一道题拆解为描述、指令、可执行断言与参考答案四段式结构并用 Joi schema 校验 frontmatter、用challengeOrder决定授课顺序。如果想进一步验证相关约定可继续阅读 curriculum/structure/blocks/basic-css.json课程编排、curriculum/schema/challenge-schema.js挑战文件字段校验以及curriculum/challenges/english/blocks/basic-css/目录下围绕 margin/padding 的其他挑战源文件。【免费下载链接】freeCodeCampfreeCodeCamp.orgs open-source codebase and curriculum. Learn math, programming, and computer science for free.项目地址: https://gitcode.com/GitHub_Trending/fr/freeCodeCamp创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考