1.CSS选择器的特异度：
选择器特异度是用来确定CSS规则优先级的重要概念。在样式定义发生冲突时，浏览器通过特异度来确定应用哪条规则。特异度通常由选择器中各种选择器类型和选择器的数量来计算，不同选择器类型有不同的特异度值。例如，ID选择器的特异度较高，通用选择器的特异度较低。
2.CSS继承：
CSS继承是指子元素从父元素继承样式属性的过程。某些属性在没有显式指定的情况下会被子元素继承。但并非所有的属性都可以继承，一些不可继承的属性需要通过显式定义应用到每个子元素。
*{
box-sizing:inherit;
}
html{
box-sizing:border-box;
}
.some-widget{
box-sizing:content-box;
}
3.CSS求值过程解析：
CSS规则的求值过程涉及样式计算的方式。当浏览器渲染页面时，会根据选择器特异度和样式规则进行计算，以确定应用哪些样式到相应的元素。了解这个过程可以帮助我们理解样式优先级和规则应用的机制。
4.CSS布局方式及相关技术：
CSS布局涉及页面元素在屏幕上的排列和定位。不同的布局技术可以用来创建不同的页面布局，比如Flexbox和Grid布局等。这些技术能够灵活地控制元素在页面上的位置和大小，使页面的结构更加合理和美观。
盒模型
我们把元素理解为一个一个的盒子，或者一个容器，盒子具有宽度、高度、内边距、外边距、边框、内容。 宽度和高度指的content box的宽高，当其值取百分数时，是相对于容器的content box的宽高，但是，容器有指定的高度时，百分数才有效，比如子元素的height：100%，父元素指定了height：100px。但如果指定 box-sizing:border-box 那么宽高指的是包含content、padding、border的尺寸。 使用 margin:auto 可以水平居中。
4.1常规流
块级&行级
块级元素独占行，行级可以并列在一行。 相互转换：
display:block/inline/inline-block/none
IFC（行级排版上下文）
只包含行级盒子的容器会创建一个IFC
IFC的规则
- 盒子在一行内水平摆放，一行放不下换行展示。
- text-align 决定一行内盒子的水平对齐
- vertical-align 决定一个盒子在行内的垂直对齐
- 避开浮动元素
BFC (块级排版上下文)
BFC的规则
- 盒子从上到下摆放
- 垂直margin合并
- BFC内盒子的margin不会与外面的合并
- BFC不会和浮动元素重叠 思考BFC的产生解决的问题：让BFC形成单独一块空间，不让其容器内的元素影响到外面的元素。
Flex Box
有主轴、侧轴
- flex-direction 流向
- justify-content 水平布局方式（主轴）
- align-items （侧轴）
- flex-grow “弹力” 挤占剩余空间
Grid 网格式
4.2浮动 float
float往往用于插入一个图片，实现文字环绕的效果。感觉可以用来布局，float到某一边可以做一个小栏目的容器，但flex和grid在布局方面显得更游刃有余，float只需要关注图片和文字环绕的场景，不必要用于布局。
4.3绝对定位
position：
- static 常规流
- relative 相对自身 偏移
- absolute 绝对定位（相对于非static的父元素）
- fixed 相对视口绝对定位
5.CSS渲染流程
6.CSS初始值
每个属性都有初始值（默认值）
可以使用initial关键字显示重置为初始值
background-color:initial
