这是我参与「第四届青训营 」笔记创作活动的的第1天 今天是开营第一天，主要讲了HTML和CSS的内容，受益颇深。上课的同时搭配MDN文档的阅读，进行知识的梳理。以下是个人听课过程中摘抄的一些笔记，第一次写可能有许多不足以及错误之处，还望指出！
HTML部分
介绍
前端技术nodejs，electron，react，webRtc，webGL，webAssmble。
页面布局
页面包括主要包括header,main,aside,footer. 布局包括常规流，浮动。 目前浏览器的排版引擎使用三种模式：怪异模式（Quirks mode）、接近标准模式（Almost standards mode）、以及标准模式（Standards mode）。
零碎知识点
html中同一个标签内多个空格会展示成一个，可以通过CSS样式中whit-space:pre来保留空格。
CSS部分
选择器
根据特异度来判断选择器优先级。计算id,(伪)类，标签的权重。 CSS可以利用方括号[]来进行选择 或标签[属性]来选择,如input[type='text']{}, a[href^='#‘]{} 查找以#开头的元素，a[href$=“.jpg”]{}来查找以.jpg结尾的元素。
伪类
状态伪类，结构伪类
- 状态伪类：a:hover,a:visied,a:activate,a:link,a:focus
- 结构伪类：li:first-child,li:last-child
颜色
rgb hsl rgba hsla，其中a用作修改透明度
IFC
行级排版上下文IFC Inline Formatting Context (IFC)
- 只包含行级盒子的容器会创建一个IFC
- IFC 内的排版规则
- 盒子在一行内水平摆放 一行放不下时，换行显示
- text-align 决定一行内盒子的水平对齐
- vertical-align 决定一个盒子在行内的垂直对齐 避开浮动(float)元素
- overflow-wrap: break-word;超出容器可以换行
BFC
块级排版上下文 Block Formatting Context (BFC)
- 某些容器会创建一个BFC
- 根元素
- 浮动、绝对定位、inline-block
- Flex子项和Grid子项
- overflow 值不是 visible 的块盒
- display: flow-root;
零碎知识
显式继承通过inherit继承父级样式。初始值为initial。 容器有指定高度的时候，高度百分数才生效，如父级有height:100px,子元素有100%才生效。
- overflow的取值:visable,hidden,scroll
- display的取值: inline,block,inline-block(不会被拆成多行),none
