这是我参与「第四届青训营 」笔记创作活动的第2天

了解CSS

全名：（Cascading Style Sheets）

CSS就是来定义页面元素的具体样式的，比如页面字体的大小，颜色，还有页面元素在页面的位置和大小，也可以对页面元素添加动画效果等。

选择器

从高到低的优先级主要分为：

1. !important,此属性可以覆盖此页面定义的所有位置定义的同种元素样式。
2. 内联样式，就是直接在标签中添加样式
3. id选择器
4. （伪）类选择器
5. 元素选择器
6. 通配选择器

可以进行组合，如图：

white-space属性

之前有时候写网页或者是写项目的时候一直不怎么懂如何保留空格以及换行，这时候white-space属性就特别好用了。这个属性就是用来处理元素内的留白。它有5种属性:

1. normal：如果有多个空格或者是换行符，浏览器会当成一个空格来处理，但是会自动换行
2. nowrap：和normal属性差不多，但是nowrap属性不会自动换行，除非遇到<br/>标签
3. pre：此属性会保留空格和换行符，就是根据元素内的格式原样输出，不会自动换行，使用此属性很容易让元素内容超出边界
4. pre-wrap：和nowrap属性相反，和pre属性差不多，区别是pre-wrap属性会自动换行
5. pre-line：如果有多个空格，浏览器会将它当成一个空格处理，但会保留换行符，且不会影响自动换行

深入CSS

CSS求值过程

浏览器在渲染的时候肯定时会有一个确定的CSS值的，否则将会无法渲染，那么浏览器又是怎么把这个值确定出来的呢？

1. 筛选获得声明值：浏览器对应用到该页面的规则进行筛选，主要通过选择器匹配，属性有效等条件进行筛选，从而获得元素的属性值。
2. 处理层叠冲突：根据列出来的声明值根据特异度或者先后顺序选出优先级最高的一个属性值。
3. 继承或者初始值，在前几个步骤中如果有元素的属性值为空，这时候浏览器就会继承父级的属性值，如果还是无属性值，这时候就会应用初始值。
4. 计算：这个阶段将一些相对值或者关键字化成绝对值，比如：em转化为px，相对路径转化为绝对路径等，然后再进行百分比或者关键字的转化使得元素值都是绝对值，最后将小数转化为整数
5. 渲染

布局

三角形的实现

在课上老师讲的一个很有趣的例子，根据容器里面的border属性可以来实现一个三角形,因为当设置border-color为4个不同颜色时，各个颜色分界线是斜着的，即：

所以当我们将元素的width属性以及height属性设置为0时，图就会变成：

而当我们通过transparent属性，即将border-color属性设置为#f35 transparent transparent时，则图形就会变成最上方的三角形，即：

transparent：是用于背景透明的属性，即rgba(0,0,0,0)

常规流

1. 行级排版上下文
2. 块级排版上下文
3. Table 排版上下文
4. Flex 排版上下文
5. Grid 排版上下文

Grid布局

因为Grid布局我看到的比较少，所以想把这个布局详细一点记一下

找到了一张flex布局和Grid布局的区别

• Grid布局主要是用grid-template将容器划分为网格，和columns,cols属性进行组合，例如：

grid-template-columns: 100px 100px 200px;
grid-template-rows: 100px 100px

表示三列两行，每一列高度为100px,100px,200px,每一行高度100px,100px。也可以设置auto属性，表示剩余空间自动填充。

• 还可以运用grid-row-start,grid-row-end,grid-column-end,grid-column-end属性指定元素的网格位置，例如：

grid-row-start: 1;
grid-column-start: 1;
grid-row-end: 3;
grid-column-end: 3;

则此元素的区域在：

也可以用grid-area属性简写为：

grid-area: 1/1/3/3;

绝对定位

static	默认值，非定位元素
relative	相对自身原本位置偏移，不脱离文档流
absolute	绝对定位，相对非 static 祖先元素定位
fixed	相对于视口绝对定位

总结：

本来觉得CSS的内容应该也没有很多，在整理的时候才知道是真的挺多的，这篇笔记整理的也不是全部，只是把我自己感觉比较容易忘记的记一下，所以不是很全面，还有很多知识点还是要再加强，继续深入，继续动手实践，让技术更熟练一点才行。