这是我参与「第五届青训营 」笔记创作活动的第2天，补发课堂笔记~

一、本堂课重点内容：

• CSS 选择器

• 设置文本样式

• CSS 工作原理

• CSS 布局

  • 盒模型
  • Flex 布局
  • Grid 布局
  • 定位

二、详细知识点介绍：

1. CSS 代码构成（选择器{属性名：属性值}

2. CSS 使用方法（内联不推荐/外链样式表推荐/<style>标签嵌入）

3. CSS 流程之选择器(通配*、标签、类、id、属性、状态伪类例如a:link、结构伪类例如li:first-child、组合）

4. 属性设置:颜色color（rgb,hsl,alpha透明度）文字text-align,line-height,font-weight:bold,font-size:Xrem,font-family：

5. CSS 继承（子元素没有指定就继承父元素的计算值）

6. CSS 求值过程解析

7. CSS 布局方式及相关技术（确定内容和位置的算法后依据元素、容器、节点、内容等信息计算，相关技术包括常规流、浮动、绝对定位）

8. 元素盒模型结构

4. 常规流中的块级布局、行级布局

9. CSS 工作原理

10. Flex 布局

• 主轴对齐justify-content，侧轴对齐align-items,弹性flex

11. Grid布局

12. 定位

三、实践练习例子：

• Grid例子

四、课后个人总结：

• 本章知识点较容易掌握，入门级难度。
• css特性知识点多杂，本次学习了解了没学过的grid布局，在实践中运用才能熟练记忆。

五、引用参考：

• 本文参考前端入门-基础语言篇-深入css课堂讲述内容，所有截图来自视频截图。