这是我参与「第四届青训营 」笔记创作活动的的第1天
前言
前一天的HTML入门让我了解了网页页面主要是由HTML、CSS和JavaScript三部分组成，今天的CSS课程老师逐渐深入，讲了CSS很多细致且全面的知识，这些是我之前自主学习过程中所欠缺的，但是在实际操作中不可忽略的。今天主要来说一下CSS如何给页面元素添加样式。
选择器(Selector)
选择器类型及优先级
CSS是通过选择器来找出页面的元素并设置其样式，主要的选择器有以下几种：
| 选择器 | 格式 | 优先级权重 |
|---|---|---|
| id选择器 | #id | 100 |
| 类选择器 | .classname | 10 |
| 属性选择器 | a[ref=“eee”] | 10 |
| 伪类选择器 | li:last-child | 10 |
| 标签选择器 | div | 1 |
| 伪元素选择器 | li:after | 1 |
| 相邻兄弟选择器 | h1+p | 0 |
| 子选择器 | ul>li | 0 |
| 后代选择器 | li a | 0 |
| 通配符选择器 | * | 0 |
在某些应用场景，给元素添加CSS样式的时候我们需要通过更多的条件选择合适的元素为其添加CSS样式，这时出现了选择器组合的方式（已在上述表格中列出相应表达式）
CSS 求值过程
网页渲染 HTML 页面中的元素，首先要明确这个元素每一个属性的准确值（非 em，百分比等单位）。而CSS求值过程就是用来计算 HTML元素样式。
- 解析HTML页面的DOM树，加载样式规则；
- 确定声明值，即设置的值
- filtering阶段筛选页面内元素，找到匹配的所有当前有效属性值
- 判断层叠值优先级，即计算各级样式（浏览器自带样式、默认样式、内联样式、外部样式、行间样式）的优先级，选择优先级最高的值
- 确定剩余未声明属性的指定值（若有层叠值，则指定值为层叠值；若没有，则为属性的默认值）
- defaulting阶段，为没有声明值的属性指定具体的值
- 转化为计算值，进一步转化为使用值
- 最终获得渲染的实际值
CSS布局
浏览器页面中常用的布局方式有两栏模型和三栏模型，这些显示样式的实现大多采用常规流、浮动和定位的方式。对于行内元素和块级元素，他们在常规流中的显示样式有所不同。例如<div>等块级元素单独占据一行进行显示；而<span>等行内元素无法单独占据一行。浮动和定位配合padding和margin可以实现很多复杂页面的布局，但是由于操作步骤繁琐，出现了较为常用的flex和grid布局的方法，能够高效地获得想要的布局形式。
浮动和定位实现基本布局
浮动float能够使元素脱离文档流，相应的指令有float:left和float:right;定位position的参数可以设定为relative、absolute和fixed。当一个元素的样式设定为position：absolute，则开启了相对定位，相对的是设定为position：relative的父元素的位置；而position：fixed是相对于浏览器窗口viewpoint而言的。可以使用float和position实现三栏布局（还要用到margin负边距）：
flex修改上述布局
流式布局相较于设定浮动和定位而言较为方便和简单，针对上面的三栏模型，只需将整体容器设定为flex，然后对中间内容div设定flex:1即可达到相同的目的。
.outer {
display: flex;
height:100px;
}
.medium {
flex: 1;
width: 100px;
height: 100px;
background: aquamarine;
}
Grid布局
Grid是网格布局，它将一个页面划分成几个主要的区域，定义这些区域的大小、位置和层次等关系，是一种css二维布局。
Grid布局和flex有很大的区别，flex是一维布局，只能处理一行或是一列。但是Grid布局是二维布局 ，将容器划分成一个个网格，可以将元素放在行和列相关的位置上，从而构建布局。下面是一个用grid布局的例子：
利用Grid布局可以实现很多其他布局样式，例如头部区域-内容区-底部区域。
今日总结
通过CSS的学习和巩固，我对CSS又有了进一步的理解，希望在后续的学习中能够更好地搭建完整的体系，继续努力！
