HTML&CSS｜ 青训营笔记

Unicode
56 阅读3分钟

这是我参与「第五届青训营 」笔记创作活动的第1天

本堂课重点内容

  1. 前端工作的定义
  2. 前端技术栈拆解与分析
  3. HTML 作用解析
  4. HTML 语义化
  5. CSS 代码构成
  6. CSS 使用方法
  7. CSS 流程之选择器组、文本渲染
  8. 调试 CSS
  9. CSS 选择器的特异度
  10. CSS 继承
  11. CSS 求值过程解析
  12. CSS 布局方式及相关技术
  13. CSS 盒模型 - 行级
  14. CSS 盒模型 - 块级

重要知识点介绍

CSS是如何工作的

image-20230115225306072.png

步骤：

  1. 浏览器载入 HTML 文件（比如从网络上获取）。
  2. 将 HTML 文件转化成一个 DOM（Document Object Model），DOM 是文件在计算机内存中的表现形式，下一节将更加详细的解释 DOM。
  3. 接下来，浏览器会拉取该 HTML 相关的大部分资源，比如嵌入到页面的图片、视频和 CSS 样式。JavaScript 则会稍后进行处理，简单起见，同时此节主讲 CSS，所以这里对如何加载 JavaScript 不会展开叙述。
  4. 浏览器拉取到 CSS 之后会进行解析，根据选择器的不同类型（比如 element、class、id 等等）把他们分到不同的“桶”中。浏览器基于它找到的不同的选择器，将不同的规则（基于选择器的规则，如元素选择器、类选择器、id 选择器等）应用在对应的 DOM 的节点中，并添加节点依赖的样式（这个中间步骤称为渲染树）。
  5. 上述的规则应用于渲染树之后，渲染树会依照应该出现的结构进行布局。
  6. 网页展示在屏幕上（这一步被称为着色）。

当浏览器在解析CSS 规则的过程中遇到了无法理解的属性或者值，它会忽略这些并继续解析下面的 CSS 声明。

CSS选择器
  • 基本选择器：通用选择器、元素选择器、类选择器、ID选择器、属性选择器
  • 分组选择器：选择器列表
  • 组合器：直接组合、后代组合、亲自组合、兄弟选择器、相邻选择器
  • 伪选择器：伪类、伪元素
  • CSS优先级：依据特异度优先选择，(id>类/伪类>标签)
CSS求值过程

image-20230115230658009.png 步骤：

  1. 确定声明值：将没有样式冲突的属性先确定下来
  2. 解决层叠冲突：对样式表中有冲突的声明使用层叠规则，确定CSS属性值
  3. 继承：对仍然没有值的属性，若可以继承，则继承父元素的值
  4. 默认值：对仍然没有值的属性，使用默认值

对于各个步骤中的属性值：

  • 指定值: 通过规则确定一个“指定值 ( specified value ) ”
  • 计算值: 将这个值 转换成 一个可以用来继承的值 = 计算值 = 计算后的值 ( computed value )
  • 使用值: 必要情况下，把计算后的值转换成一个绝对的值 = 使用值 ( used value )
  • 实际值: 根据显示环境的限制使用值转换成能够显示在用户端的值 ( actual value)。
布局

  • 常规流：行级、块级、表格布局、flex、grid

    CSS的盒模型、行级&块级（元素&盒子），IFC&BFS，flexbox，grid布局

  • 浮动

  • 定位：static、relative、absolute、fixed

课后个人总结

老师讲的很精简，类似讲了个大纲，具体的细节还需要参考MDN和W3C上的文档

老师提到的许多问题我之前一直没搞清楚，用起来也是误打误撞；我在这篇笔记里将我以前理解有偏差和不到位的内容都记下来了，方便时常温故。

引用参考

avatar
文章
阅读
粉丝