与前端训练营的日子 --Week12

SamGo

关注

发布于: 2021 年 01 月 17 日

基本功的学习差不多到尾声，还有一周就要进入组件化的学习了。一步步走来，一个前端小白也发现学了不少东西，个人觉得这训练营挺值得的，当然要坚持把每周的学习任务完成了，慢慢就会有收获的。

正常流

1. 正常流排版行为

一句话概括正常流的排版行为：依次排版，排不下就换行

2. 正常流原理

在 CSS 标准中，有一个排版状态，叫“格式化上下文（formatting context）”。而如何排布每一个文字或者盒的算法，依赖这一个排版状态。

而我们可以认为排版过程如下：

格式化上下文(formatting context) + 盒(boxes)/文字(character) = 位置(positions)

针对行内级盒和块级盒规定了对应的排版方式

行内级格式化上下文，负责规定行内级盒的排版，从左往右顺次排列元素
块级格式化上下文，负责规定块级盒的排版，从上往下顺次排列元素

在正常流中，一个盒或者文字排版的三种情况处理

当遇到块级盒：根据块级格式化上下文排版
当遇到行内级盒或者文字：首先尝试根据行内级格式化上下文排版，如果排不下，那么创建一个行盒，先将行盒排版（行盒是块级，所以到第一种情况），行盒会创建一个行内级格式化上下文。
当遇到 float 盒：把盒的顶部跟当前行内级上下文上边缘对齐，然后根据 float 的方向把盒的对应边缘对到块级格式化上下文的边缘，之后重排当前行盒。

颜色

RGB 颜色

光谱三原色理论：红、绿、蓝三种颜色的光可以构成所有的颜色。这是计算机中常用的颜色表示法。实际上光谱的颜色是很丰富的，但由于人类的视锥细胞只对红绿蓝三个颜色敏感，所以才有了这个红绿蓝三原色的原理。

CMYK 颜色

这是颜料三原色：红黄蓝。它的原理是吸收其他颜色的光，只反射一种颜色。实际上它们是光谱三原色：红绿蓝的补色，品红、黄、青，由于它们与红黄蓝相近，所以有这样的说法。而 CMY 对应青(Cyan)、品红(Magenta)、黄(Yellow)，而这里的 K 是指黑色(Black)。虽然 CMY 可以调和成黑色，但是用三种颜料生成一种黑色成本太高了，所以给黑单独配制，而且这样成本很低。