[!summary]+
本篇读书笔记主要记录书中一些投资理财相关的概念、一些思维方式、一些典型的策略等等，用于自己后续理财的基础。

“投资理财越早开始越好，无需拘泥于启动资金的多少，时间才是投资理财中最重要的增长因子”。

财务自由

需要多少钱才能财富自由

4%法则（William Bengen）：通过投资一组资产，每年从退休金中提取不超过 4%的金额用来支付自己的生活所需，那么直到自己趋势，退休金都花不完。

因此如果每年需要 40w 的开销，那么就需要超过 1000w 的资产来实现一个比较稳定的财富自由，按照自己每年的消费可以进行简单的换算。

如何避免财富缩水

[!summary]+
财富缩水主要的原因就在于通货膨胀，对通货膨胀有所了解才能更好的从通货膨胀中保护自己的财富。

很多时候通货膨胀看的是 CPI(居民消费价格指数)，最近几年国内的 CPI 同比增长一年为 2%~3%，也就是说物价每年上涨 2%~3%，但是实际上只看 CPI 是不够的，这是因为 CPI 实际上仅包含了必需消费，而如果要保证生活质量的水平不变，需要跑赢的是”可选消费通货膨胀率”。

这是因为任何一个社会，优质的教育和医疗资源的价格增长速度是比较显著的高于 CPI 的，因此可选消费指数才是我们要跑赢的目标。而这个增长速度则通常和 M2 的增长速度相关。

M2 是广义货币的量，代表社会广义货币的增长速度，最近三年的同比大概在 8%~9%，但是该指数并非完全和可选消费指数相等同。

综合而言，我们通常需要考虑的膨胀指数应该介于 CPI 和 M2 增速之间，因此资产增值的速度应该在 3%~9%之间，才能避免财富缩水，如果考虑一些不稳定时局的原因，可能还要存一些避险资产例如黄金。

通常来说，只要长期投资债券基金（包括相关的理财产品）是可以跑赢 CPI 的，债券通常的长期平均收益都在 6%上下，但若想要获得更高的收益可能就得上股票这种高风险高收益的了。

[!summary]+
设计个人首页作为 HTML 和 CSS 的实战，主要设计以下的几个部分，导航栏，侧边栏，logo，页脚，背景，以及一个简单的个人介绍页面，首先不考虑使用框架和库，仅对整体流程做熟悉，使用纯 HTML 和 CSS 进行基础实现。后续考虑使用框架和组件库进行重写。

CheckList for Web Design : Using this website to checkout those element u missed in your design. Prepare for those elements. Get Ready and Start.

Nav-Bar 页眉的导航栏设计

Buger 下拉菜单(侧边菜单)

https://alvarotrigo.com/blog/hamburger-menu-css/

flex 布局设计

使用 html css 进行布局时，如果计划使用 flex 等布局，避免无谓的划分子集的 div 等 box，避免多余的额外对齐工作，原型和草稿确认布局是很重要的。例如上述的导航栏，分成左右两个 div 即可，如果将搜索框等独立出来，在后续对齐和确认间距的时候会多出很多麻烦。

可以缩减为仅使用一个 div，使用 flex 的布局技巧来使得元素一半左对齐一半右对齐即可，下面时具体说明。可以参考文献 1 的《使用自动的外边距在主轴上对齐》章节。

如果希望让 flex 子元素靠右显示，可以在子元素中定义 margin-left: auto; (auto 也可使用其他数值单位替代)，参考 👍MDN弹性盒子容器中的对齐方式 | flex子元素靠右 | Flex的最后一个元素靠右 | Flexbox

• align-items 如果没有设置正确的话，所有的元素会按照撑满 flex 容器的高度去对齐。
• 使用 margin:auto 可以实现元素的居中
• 使用 align-self 可以实现单个 flex 子项的不同对齐方式。

可能接着阅读更多布局相关的资料，加深对布局的认识，以及正确选择合适的布局：Mdn Layout Cookbook

• 响应式设计的历史和思路：
• 媒介查询的入门 与或非等语句
• 传统的布局方法

尽可能使用现代的布局方法，我们可能不需要媒介查询的方式去实现响应式设计了，当然我们也可以结合媒介查询去对现代布局方式做优化。

[!summary]+
这里 CSS 的布局指的是通过控制元素的属性：宽度，高度，块（不同类型），内联等来实现在 HTML 的基础上对整体页面的布局进行调整。将其排布在页面上。

CSS 页面布局技术允许我们拾取网页中的元素，并且控制它们相对正常布局流、周边元素、父容器或者主视口/窗口的位置。在这个模块中将涉及更多关于页面布局技术的细节：

布局模式介绍

正常布局流：指的是不对页面进行任何布局控制的时候，浏览器默认的 HTML 布局方式，实际上就是按照源码中的先后次序依次出现，在 HTML 布局的过程中，最为重要的就是元素的块和内联两种布局方式。这里需要注意的就是，块的方向和元素的书写方向的关系。

而当我们希望使用 CSS 来改变正常的布局形式的时候，通常会使用以下的一些属性，或者说布局技术，来覆盖掉默认的 HTML 布局行为。

• display 属性：改变元素在 HTML 中的渲染形式，如 block inline inline-block 还有 CSS 引入的 CSS Grid 和 Flexbox.
• float 属性：使用 float 属性能改变块级元素换行的特性，实现类似换行的效果，其值指定其他元素围绕块级元素的哪一边。
• position 属性：利用 position 来设置盒子在盒子中的位置，在嵌套的情况下就可以产生多样的排布
• 表格布局：表格的布局方式可以用在非表格内容上，可以使用display: table和相关属性在非表元素上使用
• 多列布局： Multi-column layout 属性可以让块按列布局，比如报纸的内容就是一列一列排布的。

在讨论布局时，display 最多用到的属性为 flex 和 grid 属性，利用这两个属性值来改变布局。

[!summary]+
这一章节主要是涵盖开发 css 的各部分，有一些需要掌握的技能的 TODO 还有一些代码风格之类的东西

TODO

• [ ] 后续如果初窥门路了可以研究整理一下如何去找参考文献的思路。
• [ ] 熟练使用使用开发者工具进行网站调试的方式。

  DOC 查找

如何查阅 MDN 是一个很重要的技能（当今确实是可以使用 GPT 替代，但是也要掌握基础技能）：

• 当希望知道一个模块有什么属性可以设置的时候应该在 Modules 中查找对应的模块内容，例如表格的相关属性
• 当希望属性用法的时候才去查看对应的属性

Debug 调试

尝试熟练去使用开发者模式去查看盒模型，调整颜色，布局，查看属性，添加属性等。

编写规范

可以参考: MDN 的 CSS 代码规范的示例的同时，遵循组织 CSS 的一些准则，来确定自己的编写规范。

我的开发流程：

1. 使用 Layer 导入组件库
2. 使用 Layer 设置默认层，包括表格预设，各种预设的东西
3. 使用 Layer 设置主题层
4. 定义 custom 内容，内容的组织可以参考： OOCSS 面向对象的 CSS 设计，或者基于文章结构的组织（基础如 body,h -> 组件，例如不带 index 的列表-> 站点 level 如导航栏 -> 特指内容）

编写过程中：

• 保持命名方式统一
• 添加注释说明各部分内容
• 保持缩进和换行
• 为一些颜色之类的数值设置变量，避免重复修改多个地方

[!summary]+
表格的部分主要还是要实操，MDN 中给了一个例子，这里给我的启示是要更多的去阅读表格的相关属性，或者去阅读别人对表格设计中用到的元素，才能更好的掌握一些设计的思路，这里就给出本文中给出的一些常见的属性和设置方法，后续在具体实践中慢慢补充。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

table{
  table-layout: fixed;
  width: 100%;
  border-collapse: collapse;
  border: 3px solid purple;
}

thead th:nth-child(1) {
  width: 30%;
}

thead th:nth-child(2) {
  width: 20%;
}

thead th:nth-child(3) {
  width: 15%;
}

thead th:nth-child(4) {
  width: 35%;
}

th,
td {
  padding: 20px;
}

• 当为表格设置初始样式的时候，使用 layout 为 fixed 会使得表格的行为更好预测，避免由于内容产生的畸变导致难以设置或者出现一些奇怪对齐情况，使用 fixed 然后设置每一列的宽度，在对内容进行处理可能更好。
• 使用 nth-child 设置每一列的宽度，最终相加为 100%，使得在不同分辨率下比较好控制。
• border-collapse: collapse; 原本两个格子之间会有两条边线，这样的话可以合并重叠的边线，让表格更符合我们的预期。
• 使用 text-align 设置对齐方式
• 使用 thead，tfoot，tbody 来分别设置样式，可以做出类似三线表之类的东西
• 为标题 caption 设置对应的样式

后续可能会找一些比较常见的表之类的来整理，& 查看一下组件库。

[!summary]+
该篇章主要收集一些常见的样式设置的参考页和一些需要记住的重要设置内容，由于不可能记住所有的属性和设置，善用查询可能才是唯一的王道。

CSS 中的值与单位

CSS 中的值与单位 这里介绍常见的一些值和单位，有一些新的可能会有所缺失，但是大部分都有了，这里可以列举几个常见但是之前不理解的。

• em 相对字体大小
• vw 视窗宽度，值为百分比的含义
• 百分比：与父辈容器的百分比
• rgba 或者 rgb 的第四个值代表透明度，十六进制想设置透明度的话，就在后面再加两位 16 进制表示透明度的百分比。

这里倒是提示我们需要有个比较好的取色器或者像 vscode 中的色盘来编写 css，颜色搭配网站在 css 中也是很重要的。

[!summary]+
HTML 和 CSS 中，所有的元素都是基于一个个的 Box 去渲染的，理解盒子模型的设计，才能知道如何进行布局，从而使的页面按照希望的样子呈现，该定义实际上和 HTML 的块级元素和内联元素使完全相对应的。需要注意两者之间的关联性。

块级盒子(Block Box)和内联盒子(Inline Box)

块级盒子和 HTML 中的块级元素使相互对应的，例如 h 和 p 有以下的特点：

• 与其他元素之间会换行
• 因为换行，在内联的方向上（也就是行）会占据所有可用空间，即绝大多数情况下和父容器一样宽。
• width 和 height 属性均可发挥总用
• 内边距（padding）, 外边距（margin）和边框（border）会将其他元素从当前盒子周围“推开”

内联盒子和 HTML 中的内联元素相互对应，例如 span, em, strong 等，有以下的特点：

• 不会换行
• width 和 height 属性不起作用
• 垂直方向的内边距、外边距以及边框会被应用但是不会把其他处于 inline 状态的盒子推开。
• 水平方向的内边距、外边距以及边框会被应用且会把其他处于 inline 状态的盒子推开。

如果希望切换元素的内联或者块级属性，可以通过对盒子的 display 属性设置进行切换，对应的属性值为 inline 和 block，而更有趣的，如果我们希望不换行，但是内联中的 width 和 height 属性起到作用，可以使用 inline-box 属性。

Inline-box 属性在导航栏/链接元素中很常见，我们通过增大内容区域来使得链接存在更大的命中区域，同时不影响别的元素的呈现。

在这里还会看到片一个十分常见的盒子属性 flex 其通常会将外部的显示类型转换为 block，但是内部的显示类型设置为 flex，对其内部的各个子元素，都将转换为 flex 元素，并基于 flex 即弹性盒子的规则进行布局，可以生成更灵活的界面，这个后面在排版部分针对性的了解，这里简单介绍如下：

• flex 会将内部的元素默认沿着行的方向均分切成几个 box，但是具体的切分可以根据后续的属性进行定义。
• 如果希望 flex 的外部为内联的，则使用 inline-flex 属性。

[!summary]+
本章节是额外对于优先级的补充章节，在使用上可能会没有明显的感知，但是从概念上理解 CSS 的优先级和后续复杂项目的开发中还是起到了比较大的作用，该章节介绍层叠层的概念，在原先的优先级判定上添加了层的概念。

层叠概念回顾

该 Section 内容完全摘录自 MDN CSS 教程，也算是对于整体重要性和优先级的一个很好的总结。

1. 相关声明：找到所有具有匹配每个元素的选择器的声明代码块。
2. 重要性：根据规则是普通还是重要对规则进行排序。重要的样式是指设置了 !important (en-US) 标志的样式。
3. 来源：在两个按重要性划分的分组内，按作者、用户或用户代理这几个来源对规则进行排序。
4. 层：在六个按重要性和来源划分的分组内，按层叠层进行排序。普通声明的层顺序是从创建的第一个到最后一个，然后是未分层的普通样式。对于重要的样式，这个顺序是反转的，但保持未分层的重要样式优先权最低。
5. 优先级：对于来源层中优先权相同的竞争样式，按优先级对声明进行排序。
6. 出现顺序：当两个来源层的优先权相同的选择器具有相同的优先级时，最后声明的具有最高优先级的选择器的属性值获胜。

CSS 渲染过程中会逐步往下选择，如果在中间已经决出了胜负就不会继续往下，例如对一个元素在每个来源中只有一个定义，那么在来源层就可以决出胜负，无需往下了，而若获胜的来源中有多个层定义了同个属性，那么就会对比各个层的优先级，诸如此类。

其他的部分前文已经基本提到了，接下来补充来源和层的两个概念。

![note]+
三个来源中的：’用户代理’指的是浏览器，用户指的是网站访问者，作者指的是网站开发者，浏览器内部将来自这三个来源的样式表进行来源的排序。

来源的优先级排序

有三种层叠来源类型：用户代理样式表、用户样式表和作者样式表。浏览器根据来源和重要性将每个声明分为六个来源分组。有八个优先权级别：六个来源分组、正在过渡的属性和正在动画的属性。优先权的顺序是从具有最低优先权的普通用户代理样式，到当前应用的动画中的样式，到具有最高优先权的重要用户代理样式，再到正在过渡的样式：

1. 用户代理普通样式
2. 用户普通样式
3. 作者普通样式
4. 正在动画的样式
5. 作者重要样式
6. 用户重要样式
7. 用户代理重要样式
8. 正在过渡的样式

用 <style> 元素直接在元素上声明的样式是作者样式。不包括动画和过渡样式，用户代理普通样式具有最低优先权；用户代理重要样式具有最高优先权。

[!note]+

1. 你永远无法记住所有的 CSS 属性，善用参考资料：MDN CSS reference 和 GPT
2. 善用浏览器的开发者面板在页面上及时编辑 CSS。

CSS 运行逻辑

前面在 LearnWeb00-Web入门 中简单提及了浏览器以及 CSS 起了什么作用，这里则是对于 CSS 是如何具体参与进页面的渲染的讲解，包括早该知道的 DOM 的定义也会在这里介绍，是 CSS 是如何运行的读书笔记。

浏览器获取了 HTML 之后：

1. 会拉取其所依赖的所有 CSS，JS 和静态资源（Parser HTML）
2. 解析 HTML 代码，根据其中的 Tag、Class、ID 和相互之间的关系将 HTML 解析成 DOM ，每个元素作为其中的一个节点放进相对应的桶中。（元素桶、ID 桶之类）

紧接着，在拉取完 CSS 之后，浏览器开始解析 CSS，基于 CSS 中的选择器找到每个样式所属的 DOM 节点，并将其添加进去。

最后基于最终的 DOM(Document Object Model) 渲染出完整的页面，这里对 DOM 进行一个简单的解释：

一个 DOM 有一个树形结构，标记语言中的每一个元素、属性以及每一段文字都对应着结构树中的一个节点（Node/DOM 或 DOM node）。节点由节点本身和其他 DOM 节点的关系定义，有些节点有父节点，有些节点有兄弟节点（同级节点）。

此外浏览器在渲染过程中如果遇到了位置的 CSS 会直接跳过相应的 CSS ，然后渲染下一个规则。