这是我参与「第四届青训营 」笔记创作活动的的第2天
今日内容
课程主要就是从头到尾讲述了一下CSS的内容，我也从今日学习中复习了一遍CSS内容的知识，感觉很有收获。
1.什么是CSS
CSS，全称Cascading Style Sheets，这项技术栈主要用于定义页面元素的样式，例如字体大小、颜色、位置、动画等效果。简单来说，前端工程师们使用CSS把只有HTML的页面美化，使其更加美观，能在网民打开网页时感到愉悦。
2.引用CSS的三种方式
A.外链
形式为`<link rel="stylesheet" href="/assets/style.css">`
此方式用于在html文件外部编写css文件，在html文件中引用，这样做体现了各司其职的原则，是最为广泛使用的一种引用css的方式。
B.嵌入
形式为`<style></style>`
此方式则是在html文件中直接用style标签，在style标签里面通过选择器来写页面元素样式，初学者可能会经常这样用，但我个人认为更适合编写demo时使用
C.内联
形式为`<p style="margin-top:10em"></p>`
此方式是直接作为标签属性写在标签后，以此修改元素样式，这种方法咋说呢，一般我个人使用的话，就是想特定加某个样式才会使用。。。不好评价，老师也是跟我一样的想法。
3.CSS是如何工作的
上图就从底层简单地分析了一下CSS解析的进程，说实话，看起图来挺简单的，但是实际上去了解里面的每一步的话，都是有规则的，很细，只能说这次复习学到了很多底层的知识，收获就在此。
4.选择器
选择器的作用：找出页面中的元素，以便给他们设置样式
方式：标签名、类名、id、属性、DOM树的位置
id选择器用在页面中，一般是唯一的
类选择器用在页面中，可多次出现（常用）
属性选择器：通过元素的属性去选中元素，更改样式
[value]{
}
也可以通过一些规则来写属性选择器
例如（下式只是公式）
^= 以什么开头
$= 以什么结尾
伪类选择器
优点 不基于标签和属性定位元素
状态伪类
常见的几种：a:link a:hover a:visited :focus
结构性伪类
根据你的DOM节点在DOM树中出现的位置来选中元素
常见的几种：标签名:first-child last-child
记住常用的，如果有需要，可以去查阅MDN文档
选择器组
用逗号隔开选择器即可 例如：a，li{ color:white }
选择器组合
个人感觉这些都是基础知识，识记于脑中的话，使用时很顺手，如果真的不会的话，也可以查阅文档
5.颜色
1）RGB
两种方式写出颜色样式
rgb（红，绿，蓝）每项颜色0-255
#红绿蓝 每种颜色两位数（十六进制转换）
2）HSL
HSL为三部分 一是Hue（色相）是色彩的基本属性
二是Saturation饱和度
三是Lightness亮度
写法hsl（H，S%，L%）
3）查色表
如图
4）透明度
rgba hsla #红绿蓝透明度
就是再添加一项属性的写法 不多赘述
6.字体
1）font-family
为什么设置多个->适配多种设备
替换原则：有哪种用哪种 按顺序替换
通用字体族
如图
属性使用建议
字体列表最后写上通用字体族
英文字体放在中文字体前面
使用Web Fonts
@font-face {
font-family:
src:
format
}
2）font-size
调节字体大小
三个单位 px em %
em等于父元素的大小*2
3）font-style
默认值normal
可设置粗体 斜体
4）font-weight
字重
value 100-900 从细到粗
5）line-height
行高：一般1.1-1.2（倍数）
标准：上一行的底部到下一行底部的距离
当没有单位的时候，会以字体的大小的倍数来表述行高
6）text-align
文字对齐方式
- 四个value
- left 向左对齐
- center 向中对齐
- right 向右对齐
- justify 自动调整
7）spacing
letter-spacing字符间距 word-spacing单词间距
text-indent 缩进 text-decoration 文字修饰
空白符的处理 多个只算一个
- white-space
- normal 默认值 合并空格
- nowrap 不换行
- pre 保留所有 包括空格 跟代码所写一样
- pre-wrap 自动换行，保留空格
- pre-line 自动换行，合并空格
8）text-decoration
文本修饰
- 四个value
- none 默认值
- underline 下划线
- line-through 删除线
- overline 上划线
7.调试CSS
可以通过网页右键打开控制台
对控制台下方的方框里面的属性值进行改变来获得即时效果
8.选择器的优先级
算法：选择器的特异度的总和大小
例如：id：1 class：2 标签：2
9.继承
某些属性会自动继承其父元素的计算值，除非显式指定一个值
一般文字相关都可继承 一般与盒模型相关的都不可继承
显式继承 inherit
显式继承用于某些不可从父级继承的属性
10.初始值
CSS中每个属性都有自己的初始值
可以用initial重置初始值
11.CSS求值过程
求值是个底层操作，也是一个重难点
流程如图
按图来说，在整个求值过程中，环环相扣，有规则地运行，对于我来说是CSS学习中的一个新的理解，了解了底层解析的过程，我对编写CSS代码的理解又有了新的提升。
12.布局
布局即为确定内容的大小和位置的算法
依据元素、容器、兄弟节点和内容等信息类计算
相关技术：常规流、浮动流、绝对定位流
最基本的盒子 如图
有border padding margin 等属性
以及拓展属性，在这就不一一赘述了，都是一些必须记住的属性~
margin:auto水平居中（一种方法 ）
margin collapse边距合并 取较大者表示
box-sizing:border-box（项目中经常使用）
如图
overflow 处理溢出的内容
三个属性
visible 自动拓展可视的
hidden 隐藏超过盒子宽高的
scroll 滚动条式
13.块级vs行级
比较明确，直接上图，大家看一看就知道了
如图
两者的标签与写法
如图
- display四大属性 默认block
- block 块级盒子
- inline 行级盒子
- inline-block 行内块盒子
- none 排版时被忽略
14.排版
行级排版上下文
Inline Formatting Context(IFC)
只包含行级盒子的容器会创建一个IFC
排版规则
盒子在一行内水平摆放
一行放不下时，换行显示
text-align 决定一行内盒子的水平对齐
vertical-align决定一个盒子在行内的垂直对齐
避开浮动元素
块级排版上下文
Block Formatting Context（BFC）
某些容器会创建一个BFC
根元素
浮动、绝对定位、inline-block
Flex子项和Grid子项
overflow值不是visible的块盒
display：flow-root
- BFC内的排版规则
- 盒子从上到下摆放
- 垂直margin合并
- BFC内盒子的margin不会与外面的合并
- BFC不会和浮动元素重叠
Flex布局
一种新的排版上下文
盒子拥有主轴和侧轴
它可以控制自己盒子：
- 摆放的流向
- 摆放顺序
- 盒子的宽度和高度
- 水平和垂直方向的对齐
- 是否允许折行
相关的属性在使用时已经熟悉，如有需要可查阅MDN文档。
Grid布局
二维的布局方式
display:grid 使元素生成一个块级的Grid容器
使用grid-template相关属性将容器划分的网格
设置每个子项占哪些行/列
划分网格
grid-template-columns列：
grid-template-rows行：
grid line 网格线
grid-area：1/1/3/3
浮动布局
主要是为了实现文字围绕图片的效果
绝对定位
- position 有四个属性
- static 默认值，不作定位
- relative 相对定位，相对于原有位置定位，不脱离文档流
- absolute 绝对定位，脱离文档流
- fixed 相对于视口绝对定位
