Merge branch 'main' of https://github.com/CFCoLearning/FullStack-Compass

Author: DemoJustLuGuo

AmberHeart_FullStack_Compass.md

@@ -9,5 +9,15 @@
 <!-- Content_START -->
 
 ### 02.03
+#### 今日学习时长：30min 总结：复习
+
+目标是 noctchill为主角的官网类展示网站<br><br>
+
+今天主要以复习以前看过的内容为主,毕竟还在外地拜年<br><br>
+
+把CSS之前的内容例如是基本骨架与表格表单等标签大致复习了一下<br><br>
+
+明天大概会有空？等大后天回去就有长时间空闲学习了<br><br>
+
 
 <!-- Content_END -->

DriveFLY_FullStack_Compass.md

@@ -1,5 +1,7 @@
 # CFC Studio 共学 FullStack Compass 指引
+
 ---
+
 # [Drive_FLY]
 
 > Great success starts with a ordinary beginnings.
@@ -10,4 +12,88 @@
 
 ### 02.03
 
+概要：对 CSS 的内容进行了基础面的补充，同时开始观看[Full-Stack Social Media App Tutorial](https://www.youtube.com/watch?v=o080tU3sd0k)了解 React && Next.JS。参与本次共学的目的主要也是围绕这两个方面进行的：更全面地对 CSS 的常用属性有一个了解、额外掌握 Tailwind CSS、了解并使用 React 与 Next.JS 框架，至于产品设计的部分，时间有限，暂时不考虑做过多涉及。
+
+### display
+
+每一个元素根据标签的不同都有默认的`display`值，最为常见的有这些：
+
+- `block`块级元素：开启新的一行、撑满整个容器
+
+  div、p、form、header、footer、section
+
+- `inline`行内元素：在段落中包裹一段内容，不影响段落排版
+
+  span、a
+
+- `inline-block`：
+
+- `none`用于显示或隐藏元素
+
+  > 和`visibility:hidden`不同的是`display`不会占据空间，而前者会。
+
+默认的`display`是可以被重写的，例如可以重写`li`为`inline`用于制作水平菜单。
+
+### width
+
+width 可以限定元素的宽度，避免长段文字占据整个屏幕，用户需要不断将眼睛焦点从左到右移动，配合 margin 的`auto`可以将元素居中展示。
+
+```css
+#main {
+  width: 600px;
+  margin: 0 auto;
+}
+```
+
+但美中不足的是在浏览器本身宽度小于 width 时会展示滚动条。这时可以将`width`替换为`max-width`，实现在有空间时尽可能变宽，空间不足时则主动收缩。
+
+### 盒模型
+
+![盒模型示意图](https://developer.mozilla.org/zh-CN/docs/Learn_web_development/Core/Styling_basics/Box_model/box-model.png)
+
+元素的 border 与 padding 会撑开 box，也就是说实际上元素的实际宽度或高度是 width/height+padding+border。
+
+通过设置`box-sizing: border-box`，可以启用代替盒模型，盒子实际宽高即设置宽高，不会再向外扩展。
+
+### 边距
+
+padding 和 margin 接收 1~4 个参数，分别对应不同情况：
+
+> padding 创建元素内部的额外空间，margin 创建元素外部的额外空间。
+
+```css
+/* 应用于所有边 */
+padding: 1em;
+
+/* 上边下边 | 左边右边 */
+padding: 5% 10%;
+
+/* 上边 | 左边右边 | 下边 */
+padding: 1em 2em 2em;
+
+/* 上边 | 右边 | 下边 | 左边 */
+padding: 5px 1em 0 2em;
+```
+
+### position
+
+position 的默认值是`static`。设置为`static`的元素不会被`positioned`，即特殊地定位，设置为其他值（relative、fixed、absolute）则反之。
+
+**relative（相对的）**
+
+relative 单独使用与 static 一致，没有额外的效果。当配合 top、right、bottom、left 使用时，可以将元素从原有位置向设置的方向偏移，需要注意的是偏移后空出的部分仍然会被占用，不会被其他元素使用。
+
+**fixed（固定的）**
+
+用于固定在页面的指定位置，需要配合 top、right、bottom、left 使用。如停留在右下角可将 right 与 bottom 设置为 0。元素的右侧及下方与页面的边距即为 0。fixed 元素不占用页面空间。
+
+**absolute（绝对的）**
+
+与 fixed 类似，但定位的对象不是页面整体而是最近的`positioned`祖先（设置为非`static`的元素），若无祖先则相对页面。
+
+### Reference
+
+https://zh.learnlayout.com/
+https://learn.shayhowe.com/html-css/
+
 <!-- Content_END -->

README.md

@@ -129,15 +129,15 @@ SaaS、Typescript、React、Nextjs、Taildwindcss、MDX、Linaria、Shiki、Reac
 <!-- START_COMMIT_TABLE -->
 |  | 2.03 | 2.04 | 2.05 | 2.06 | 2.07 | 2.08 | 2.09 | 2.10 | 2.11 | 2.12 | 2.13 | 2.14 | 2.15 | 2.16 | 2.17 | 2.18 | 2.19 | 2.20 | 2.21 | 2.22 | 2.23 |
 | ------------- | ---- | ---- | ---- | ---- | ---- | ---- | ---- | ---- | ---- | ---- | ---- | ---- | ---- | ---- | ---- | ---- | ---- | ---- | ---- | ---- | ---- |
-| echozyr2001 |   | | | | | | | | | | | | | | | | | | | | |
+| echozyr2001 | ✅ | | | | | | | | | | | | | | | | | | | | |
 | Kirov7 |   | | | | | | | | | | | | | | | | | | | | |
 | Hoshino |   | | | | | | | | | | | | | | | | | | | | |
 | RisingGalaxy |   | | | | | | | | | | | | | | | | | | | | |
 | YamKH514 |   | | | | | | | | | | | | | | | | | | | | |
-| DriveFLY |   | | | | | | | | | | | | | | | | | | | | |
+| DriveFLY | ✅ | | | | | | | | | | | | | | | | | | | | |
 | Makise |   | | | | | | | | | | | | | | | | | | | | |
 | DemoJustLuGuo |   | | | | | | | | | | | | | | | | | | | | |
-| AmberHeart |   | | | | | | | | | | | | | | | | | | | | |
+| AmberHeart | ✅ | | | | | | | | | | | | | | | | | | | | |
 <!-- END_COMMIT_TABLE -->
 
 ## 数据统计

echozyr2001_FullStack_Compass.md

@@ -8,4 +8,30 @@
 
 ### 02.03
 
+> 学习时间： 60 min
+
+发起这期共学，我主要是想学一点产品设计相关的内容。之前了解过 `figma` 者应该是比较主流的设计工具，但是在搜集资料时发现了 `framer`，这应该是比较新的工具。
+
+我一向是喜欢尝鲜的，于是准备先学习 `framer` 的内容，先从官方的教程开始。
+
+---
+
+设置字体为 `Material Symbols Rounded`，可以将 `gesture` 转换为 ![gesture](./images/echozyr2001/gesture.png)
+
+将 `color` 设置为 `assets`，方便下次使用。
+
+通过点击右上角的加号，可以同时预览多端视图，不需要切换。
+
+![tab1](./images/echozyr2001/tab1.png)
+
+![tab2](./images/echozyr2001/tab2.png)
+
+修改主视图内容可以影响其他视图，同时也可以单独修改其他视图，以满足多端适配。
+
+将多个组件合并为一个 `stack`，可以通过某种特殊的规则操作它，暂时还没搞明白。
+
+一个小时做了这么个鬼东西。
+
+![home](./images/echozyr2001/home.png)
+
 <!-- Content_END -->