这是我参与「第五届青训营 」伴学笔记创作活动的第2天
这篇笔记本来是该昨天发布的，但是晚上又出去吃了顿饭，耽误了。就在草稿箱隔了一夜。
这节课讲了大概3个小时，涉及到的知识也是多的一批，不好好总结一下很容易忘。
css构成、方式、选择器
那些太基础的就不说了，记录一下课程里学到的和课外学到的吧。
首先是伪类:invalid表示任意内容未通过验证的表单元素，例如当:invalid元素未验证通过，可以设置一个样式，:valid验证通过设置另一个样式，这样，就摆脱了js实现了简单的表单验证。
另一个伪类:focus-within表示当该元素获得焦点或者他的后代元素获得焦点，常见的效果就是通过子元素获得了焦点改变父元素的样式。
另一个新知识，rgb的兄弟hsl（H色佬）,也可以控制元素的颜色，还有，现在的浏览器可以渲染rgb里加alpha了，我学的时候还被强调rgb和rgba的区别了。
CSS选择器的权重
这个地方一个图就说明了一切
CSS布局
重要的来了。布局方式
块级盒子不能和别的盒子并列，而行级的可以并列一行或拆成多行，行级中的宽高属性不适用。这是基本的知识。之后就牵扯出来IFC和BFC，这也是常考的面试题。
题一，介绍下IFC、BFC、GFC、FFC？
答：BFC(Block formatting contexts)︰块级排版上下文的渲染区域，可以触发产生BFC的元素有float、position、overflow不是hidden、inline-block、flex子项和grid子项; BFC有什么作用呢?比如说实现多栏布局。IFC：行级排版上下文的渲染区域，触发产生条件，只包含行级盒子的容器才创建一个IFC。作用：方便于水平居中和vertical-align:middle的垂直居中。FFC：也就是flex区域了，当display值为flex或者inline-flex才会创建一个FFC，作用和flex一样，自适应布局。GFC：网格排版的渲染区域。也就是Grid布局产生的区域，当display值为grid才会产生GFC。
题二，介绍下BFC和其应用？
答：FC 就是块级格式上下文，是页面盒模型布局中的一种 CSS 渲染模式，相当于一个独立的容器，里面的元素和外部的元素相互不影响。创建 BFC 的方式有：
- html 根元素
- float 浮动
- 绝对定位
- overflow 不为 visiable
- display 为表格布局或者弹性布局
BFC 主要的作用是：
- 清除浮动
- 防止同一个 BFC 容器中的相邻元素间的外边距重叠问题
BFC特性：垂直方向的距离由margin决定，并且会发生margin折叠的问题，两个元素之间的margin只取最大的那个margin来使用，不会叠加，同时水平方向上的左margin会触及到容器的左margin（从左开始排） 。
flex布局
同时flexibility实现了盒子像弹簧那样伸缩，flex-grow有剩余空间时的伸展能力；flex-shrink容器空间不足时收缩的能力；flex-basis没有伸展或收缩时的基础长度。
grid布局
可以理解为二维的布局方式，首先划定二维上的基线网格，然后子元素设置占位格子。
划分网格
盒子使用
具体还是得看官方文档，有好多详细的内容。
float布局和position布局
也是那些东西，但是课程没有讲position:sticky；不是很满意，嘿嘿。
笔记先总结这些。
