[这是我参与「第五届青训营 」伴学笔记创作活动的第 2 天]
1. css是什么？
用于定义页面元素的样式，如 设置字体和颜色 ，元素的位置和大小等
代码展示
h1 { color: pink; font-size: 12px; }
h1是标签选择器，选择器可以帮助我们快速地找出页面中的元素，并设置样式。类似的还有.h1是类选择器；#h1是id选择器；*是通配选择器，它会选出页面中所有的元素需要注意的是： 如果使用了id选择器，那么请保证该id的唯一性
2. 如何找到目标元素？
按照标签名，类名或id
按照属性
按照DOM树中的位置
3. css选择器
标签选择器
h1; 类选择器.h1; id选择器#h1属性选择器: 选出带有某些特定属性的元素， 如
input[type="password"]表示选出带有属性type=password的input
4. css选择器的组合
名称 语法 说明 示例 直接组合 AB 满足A同时满足B input:focus后代组合 A B 选中B，如果它是A的子孙 nav a亲子组合 A > B 选中B，如果它是A的子元素 section > p兄弟选择器 A ~ B 选中B，如果它在A后且和A同级 h2 ~ p相邻兄弟选择器 A + B 选中B，如果它紧跟在A的后面 h2 + p
5. css中的伪类
状态性伪类
选中处于某种状态下的元素，如
a:hover表示选中鼠标悬停在的a元素，多用于和用户的交互结构性伪类
通过判断元素在DOM树中的位置来决定是否选中该元素。如
h:first-child表示选中第一次出现出现的h元素
6. 关于样式继承
某些元素属性会自动继承其父元素的计算值，除非显示指定一个值
可以继承的属性 如： 与文字相关的属性
不可继承的属性 如： 与盒模型相关的属性
>如何转换？ 我们可以使用
*通配符来指明哪些元素需要继承
7. 样式初始值
CSS 中，每个属性都有一个初始值， 如：
background-color的初始值为 transparent,margin-left的初始值为0可以使用
initial关键字显示重置为初始值 如background-color: initial
8. css求值过程
浏览器在解析css时候，通过一下过程得到最终的结果，该过程称为css求值过程
1.filtering--筛选过程
在该过程中，浏览器的渲染主进程会遍历样式表（css表）。渲染主进程会根据选择器是否匹配，属性是否有效，是否符合当前的media等条件进行对元素的筛选。最终得到一个
Declared Value---声明值。注意：一个元素的某个属性可能有多个声明值， 这是因为可能有多个样式匹配到同一个属性2.cascading--决定使用哪个属性值
在该过程中，会将filtering得到的结果按照来源、!important、选择器特异性、书写顺序等规则选出优先级最高的一个属性值。最终等到一个
Cascaded Value---层叠值3.defaulting--是否使用默认值
如果cascading过程得到的
Cascaded Value值为空，那么会将Cascaded Value设置为默认值，最终得到一个Specified Value---指定值注意：Specified Value值不会为空4.resolving--处理
在该过程中，会对defaulting过程得到的结果进行处理，将一些相对值或者关键字转化为绝对值，比如：em转化为px，相对路径转化为绝对路径，最终得到一个
Computed Value---计算值Computed Value是浏览器在不进行实际布局的情况下，所得到最具体的值， 比如：设置某个元素的宽度为60%，在不进行实际布局的情况下无法计算具体值5.formatting--进一步处理
在该过程中，将
Computed Value进一步转换，比如关键字、百分比等都转为绝对值，最终得到Used Value---使用值6.constraining-- 得到最终渲染值
在该过程中，会将
Used Value中小数像素转为整数，最终得到实际值
9. 布局的相关技术
常规流
浮动
绝对定位
10. 布局
常规流 Nromal Flow
根元素、浮动和绝对定位的元素会脱离标准流
其他元素都在常规流之内(in-flow)
IFC (行级排版上下位)
只包含行级盒子的容器会创建一个IFC
IFC的排版规则
- 盒子在以内水平摆放
- 一行放不下时，换行显示
text-align决定一行内盒子的水平对齐vertica-align决定一个盒子在行内的垂直对齐- 行盒会避开浮动元素
BFC(块级排版上下文)
某些容器会创建一个BFC
- 根元素
- 浮动、绝对定位、inline-block
- Flex子项和Grid子项
overflow值不为 visible 的块盒display: flow-rootBFC内盒子的排版规则
- 盒子从上到下摆放
- 垂直margin合并
- BFC内盒子的margin不会与外面的合并
- BFC不会和浮动元素重叠
11.flex属性值
附上一张flex属性值
12. Grid布局 display: grid
使用
grid-template-columns来布局列， 使用grid-template
1fr表示占容器所剩空间的一份使用
grid-area来进行划分
grid-area相当于grid-row-start等属性的缩写
