当前位置：首页 > news >正文

Vue百日学习计划Day4-8——Gemini版

news 来源：原创 2025/5/15 7:36:03

番茄时钟： 每个番茄钟为25分钟学习，之后休息5分钟。每完成4个番茄钟，进行一次15-30分钟的长休息。
灵活性： 这仍然是一个建议性计划。某些主题（尤其是 Flexbox 和 Grid）可能需要比预期更多的时间来练习和理解。请根据您的进度灵活调整。
实践是关键： 对于 Flexbox、Grid 和响应式设计，动手实践至关重要。请务必完成相关的练习和游戏。
资源利用：
- MDN Web Docs (CSS): https://developer.mozilla.org/zh-CN/docs/Web/CSS
- CSS Tricks (Flexbox 指南): https://css-tricks.com/snippets/css/a-guide-to-flexbox/
- CSS Tricks (Grid 指南): https://css-tricks.com/snippets/css/complete-guide-grid/
- Flexbox Froggy: https://flexboxfroggy.com/
- Grid Garden: https://cssgridgarden.com/

学习目标 Day 4-8：CSS 进阶与现代布局

Day 4：选择器权重精通与盒模型再探
- 深入理解并能计算 CSS 选择器的权重。
- 彻底掌握盒模型，特别是 box-sizing 的应用。
- 理解并应用外边距折叠 (Margin Collapse) 的规则。
Day 5：Flexbox 布局基础与实践 (一)
- 理解 Flexbox 布局的核心概念（容器与项目、主轴与交叉轴）。
- 掌握 Flex 容器的主要属性。
- 通过 Flexbox Froggy 进行初步实践。
Day 6：Flexbox 布局进阶与实践 (二) 及定位 (Positioning)
- 掌握 Flex 项目的主要属性。
- 能够使用 Flexbox 构建常见的布局模式。
- 学习 CSS 定位 (Positioning)：static, relative, absolute, fixed, sticky。
Day 7：Grid 布局入门与响应式设计基础
- 理解 Grid 布局的核心概念（容器与项目、网格线、网格轨道、网格单元）。
- 掌握 Grid 容器的基本定义属性。
- 通过 Grid Garden 进行初步实践。
- 理解响应式设计的概念和重要性。
- 学习使用 Media Queries 实现基本的响应式布局。
Day 8：Grid 布局进阶, BFC, CSS 变量与动效基础
- 掌握 Grid 项目的放置属性和对齐属性。
- 能够使用 Grid 构建更复杂的二维布局。
- 理解 BFC (块级格式化上下文) 的概念及其作用。
- 学习 CSS 变量 (自定义属性) 的使用。
- 初步了解 CSS 过渡 (Transitions) 与动画 (Animations) 的基础用法。

每日学习计划 (3小时/天)

Day 4: 选择器权重精通与盒模型再探

第1个番茄钟 (25分钟学习 + 5分钟休息):
- 主题： CSS 选择器权重 (Specificity) - 概念与计算规则。
- 内容： 阅读 MDN 关于选择器权重的文档，理解内联、ID、类/属性/伪类、元素/伪元素选择器的权重级别。
- 实践： 尝试手写不同组合的选择器，并手动计算其权重。
第2个番茄钟 (25分钟学习 + 5分钟休息):
- 主题： CSS 选择器权重 - !important 与实际应用。
- 内容： 学习 !important 的作用及其对权重的覆盖，讨论其使用场景和应避免的情况。
- 实践： 创建一些冲突的样式规则，通过调整选择器或使用 !important 来观察其效果。
第3个番茄钟 (25分钟学习 + 5分钟休息):
- 主题： 盒模型 (Box Model) 深入回顾 - content-box vs border-box。
- 内容： 再次回顾 width, height, padding, border, margin。重点理解 box-sizing 属性，特别是 border-box 的优势。
- 实践： 创建元素，分别在 content-box 和 border-box 模式下设置相同的 width, padding, border，观察最终占据的空间。
第4个番茄钟 (25分钟学习 + 5分钟休息):
- 主题： 外边距折叠 (Margin Collapse)。
- 内容： 学习相邻兄弟元素、父子元素（无内容、padding、border 分隔时）以及空块元素的外边距折叠规则。
- 实践： 创建不同的 HTML 结构来复现各种外边距折叠的场景，并尝试使用 BFC 或其他技巧来阻止折叠。
- (长休息: 15-30分钟)
第5个番茄钟 (25分钟学习 + 5分钟休息):
- 主题： 盒模型相关练习。
- 内容： 查找一些关于盒模型的在线练习题或自己设计一些小布局，专注于精确控制元素的尺寸和间距。
- 实践： 完成练习，确保理解 padding, border, margin 如何影响布局。
第6个番茄钟 (25分钟学习 + 5分钟休息):
- 主题： 今日内容回顾与总结。
- 内容： 快速回顾选择器权重计算和盒模型的关键点。
- 实践： 尝试解释给“橡皮鸭”听，或者写一篇简短的总结笔记。

Day 5: Flexbox 布局基础与实践 (一)

第1个番茄钟 (25分钟学习 + 5分钟休息):
- 主题： Flexbox 简介与核心概念。
- 内容： 阅读 MDN 或 CSS Tricks 关于 Flexbox 的介绍。理解 Flexbox 是什么，为什么需要它，以及核心概念：flex 容器 (flex container) 和 flex 项目 (flex item)，主轴 (main axis) 和交叉轴 (cross axis)。
- 实践： 画图理解主轴和交叉轴在不同 flex-direction 下的变化。
第2个番茄钟 (25分钟学习 + 5分钟休息):
- 主题： Flex 容器属性 (一): display: flex 与 flex-direction。
- 内容： 学习如何将一个元素变为 flex 容器，以及如何使用 flex-direction (row, row-reverse, column, column-reverse) 控制主轴方向。
- 实践： 创建一个容器和几个项目，尝试不同的 flex-direction 值，观察项目排列的变化。
第3个番茄钟 (25分钟学习 + 5分钟休息):
- 主题： Flex 容器属性 (二): flex-wrap 与 flex-flow。
- 内容： 学习 flex-wrap (nowrap, wrap, wrap-reverse) 如何控制项目是否换行，以及 flex-flow 作为 flex-direction 和 flex-wrap 的简写。
- 实践： 增加 flex 项目的数量，使其超出容器宽度/高度，测试 flex-wrap 的效果。
第4个番茄钟 (25分钟学习 + 5分钟休息):
- 主题： Flex 容器属性 (三): justify-content。
- 内容： 学习 justify-content (flex-start, flex-end, center, space-between, space-around, space-evenly) 如何控制项目在主轴上的对齐方式。
- 实践： 针对不同的 flex-direction，尝试所有 justify-content 的值，观察效果。
- (长休息: 15-30分钟)
第5个番茄钟 (25分钟学习 + 5分钟休息):
- 主题： Flex 容器属性 (四): align-items。
- 内容： 学习 align-items (stretch, flex-start, flex-end, center, baseline) 如何控制项目在交叉轴上的对齐方式（单行）。
- 实践： 尝试所有 align-items 的值，观察项目在交叉轴上的表现。
第6个番茄钟 (25分钟学习 + 5分钟休息):
- 主题： Flexbox Froggy 游戏练习 (关卡 1-12)。
- 内容： 打开 Flexbox Froggy (https://flexboxfroggy.com/)。
- 实践： 通过游戏的方式练习今天学习的 Flex 容器属性。目标完成前 12 关。

Day 6: Flexbox 布局进阶与实践 (二) 及定位 (Positioning)

第1个番茄钟 (25分钟学习 + 5分钟休息):
- 主题： Flex 容器属性 (五): align-content。
- 内容： 学习 align-content (flex-start, flex-end, center, space-between, space-around, stretch) 如何控制多行项目在交叉轴上的对齐方式。注意与 align-items 的区别。
- 实践： 确保 flex 容器内有多行项目 (flex-wrap: wrap)，然后尝试不同的 align-content 值。
第2个番茄钟 (25分钟学习 + 5分钟休息):
- 主题： Flex 项目属性 (一): order, flex-grow, flex-shrink。
- 内容： 学习 order 如何改变项目顺序，flex-grow 如何分配剩余空间，flex-shrink 如何处理空间不足的情况。
- 实践： 创建多个 flex 项目，尝试修改它们的 order，并设置不同的 flex-grow 和 flex-shrink 值，观察布局变化。
第3个番茄钟 (25分钟学习 + 5分钟休息):
- 主题： Flex 项目属性 (二): flex-basis 与 flex 简写属性, align-self。
- 内容： 学习 flex-basis 定义项目在主轴上的初始大小，flex 作为 flex-grow, flex-shrink, flex-basis 的简写。学习 align-self 如何覆盖容器的 align-items。
- 实践： 使用 flex 简写属性，并为单个项目设置 align-self。
第4个番茄钟 (25分钟学习 + 5分钟休息):
- 主题： Flexbox Froggy 游戏练习 (关卡 13-24)。
- 内容： 继续 Flexbox Froggy 游戏。
- 实践： 目标完成剩余关卡，熟练运用 Flexbox 容器和项目属性。
- (长休息: 15-30分钟)
第5个番茄钟 (25分钟学习 + 5分钟休息):
- 主题： CSS 定位 (Positioning) 基础：static, relative, absolute。
- 内容： 阅读 MDN 关于 position 属性的文档。理解 static (默认值)，relative (相对自身位置偏移)，absolute (相对于最近的非 static 定位祖先元素定位)。学习 top, right, bottom, left 属性。
- 实践： 创建元素，分别设置不同的 position 值，并配合 top, left 等观察其行为。特别注意 absolute 定位的参照物。
第6个番茄钟 (25分钟学习 + 5分钟休息):
- 主题： CSS 定位 (Positioning) 进阶：fixed, sticky 与 z-index。
- 内容： 理解 fixed (相对于浏览器窗口定位)，sticky (粘性定位) 的行为。学习 z-index 如何控制定位元素的堆叠顺序。
- 实践： 创建一个长页面，尝试 fixed 和 sticky 定位效果。创建多个重叠的定位元素，使用 z-index 调整它们的显示层级。

Day 7: Grid 布局入门与响应式设计基础

第1个番茄钟 (25分钟学习 + 5分钟休息):
- 主题： Grid 布局简介与核心概念。
- 内容： 阅读 MDN 或 CSS Tricks 关于 Grid 布局的介绍。理解 Grid 是什么，与 Flexbox 的区别（一维 vs 二维），核心概念：grid 容器 (grid container) 和 grid 项目 (grid item)，网格线 (grid line)，网格轨道 (grid track)，网格单元 (grid cell)，网格区域 (grid area)。
- 实践： 画图理解 Grid 的二维结构。
第2个番茄钟 (25分钟学习 + 5分钟休息):
- 主题： Grid 容器属性 (一): display: grid, grid-template-columns, grid-template-rows。
- 内容： 学习如何将元素变为 grid 容器。使用 grid-template-columns 和 grid-template-rows 定义网格的列宽和行高 (使用长度单位、百分比、fr 单位、repeat() 函数)。
- 实践： 创建一个 grid 容器和几个项目，定义不同数量和大小的列和行，观察项目的排列。
第3个番茄钟 (25分钟学习 + 5分钟休息):
- 主题： Grid 容器属性 (二): grid-gap (或 gap, row-gap, column-gap), grid-template-areas。
- 内容： 学习 grid-gap (以及新的 gap 属性) 设置网格线之间的间距。初步了解 grid-template-areas 通过命名网格区域来布局。
- 实践： 为网格添加间距。尝试使用 grid-template-areas 定义一个简单的布局。
第4个番茄钟 (25分钟学习 + 5分钟休息):
- 主题： Grid Garden 游戏练习 (关卡 1-14)。
- 内容： 打开 Grid Garden (https://cssgridgarden.com/)。
- 实践： 通过游戏的方式练习今天学习的 Grid 容器属性。目标完成前 14 关。
- (长休息: 15-30分钟)
第5个番茄钟 (25分钟学习 + 5分钟休息):
- 主题： 响应式设计 (Responsive Design) 概览与 Viewport。
- 内容： 理解什么是响应式网页设计及其重要性。学习 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 标签的作用。
- 实践： 在一个 HTML 文件中加入 viewport meta 标签，在浏览器开发者工具中切换不同设备预览。
第6个番茄钟 (25分钟学习 + 5分钟休息):
- 主题： Media Queries 基础。
- 内容： 学习 @media 规则的语法，如何根据不同的媒体特性 (如 min-width, max-width, orientation) 应用不同的 CSS 样式。
- 实践： 编写一个简单的 Media Query，使得页面在不同屏幕宽度下背景色不同，或者字体大小改变。

Day 8: Grid 布局进阶, BFC, CSS 变量与动效基础

第1个番茄钟 (25分钟学习 + 5分钟休息):
- 主题： Grid 项目属性 (一): grid-column-start, grid-column-end, grid-row-start, grid-row-end。
- 内容： 学习如何通过指定网格线来放置 grid 项目，以及 span 关键字的用法。
- 实践： 创建一个 Grid 布局，手动指定项目占据的网格单元。
第2个番茄钟 (25分钟学习 + 5分钟休息):
- 主题： Grid 项目属性 (二): grid-column, grid-row, grid-area 简写。Grid 项目对齐 (justify-self, align-self, place-self)。
- 内容： 学习简写属性。学习如何在网格单元内对齐项目。
- 实践： 使用简写属性放置项目，并尝试不同的对齐方式。继续 Grid Garden 游戏 (关卡 15-28)。
第3个番茄钟 (25分钟学习 + 5分钟休息):
- 主题： BFC (块级格式化上下文) - 概念与应用。
- 内容： 理解什么是 BFC，如何创建 BFC (例如：overflow: auto/hidden, display: flow-root, position: absolute/fixed 等)。理解 BFC 的特性 (如：包含浮动元素，阻止外边距折叠)。
- 实践： 创建一个包含浮动元素的父容器，通过将其变为 BFC 来清除浮动。尝试用 BFC 解决外边距折叠问题。
第4个番茄钟 (25分钟学习 + 5分钟休息):
- 主题： CSS 变量 (自定义属性)。
- 内容： 学习如何声明 (--variable-name: value;) 和使用 (var(--variable-name)) CSS 变量。理解其作用域和级联性。
- 实践： 定义一些颜色、字体大小等作为 CSS 变量，并在多个地方使用它们。尝试在 Media Query 中修改 CSS 变量的值。
- (长休息: 15-30分钟)
第5个番茄钟 (25分钟学习 + 5分钟休息):
- 主题： CSS 过渡 (Transitions) 基础。
- 内容： 学习 transition-property, transition-duration, transition-timing-function, transition-delay 以及简写属性 transition。
- 实践： 为元素的某个属性 (如 background-color, width, opacity) 添加过渡效果，当鼠标悬停或状态改变时观察平滑变化。
第6个番茄钟 (25分钟学习 + 5分钟休息):
- 主题： CSS 动画 (Animations) 基础。
- 内容： 学习 @keyframes 规则定义动画序列，以及 animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction 等属性。
- 实践： 创建一个简单的 @keyframes 动画 (如：背景色变化、元素移动)，并将其应用到元素上。