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

今天和昨天的内容主要都是前端的基础内容，今天是讲的CSS，内容比昨天多一点点。

CSS是什么？

CSS（Cascading Style Sheets）是层叠样式表,是一种用来表现HTML或XML等文件样式的计算机语言。CSS就是HTML页面华丽的外衣，定义页面元素的样式，如果一个HTML页面使用两套不同的CSS样式，就能呈现出两种截然不同的风格。大致由以下几个部分组成：

选择器：用来给选中页面中的一些元素，然后给这些元素定义样式
属性值：选中一些元素之后，给这些元素设置相关的属性更改样式
声明：每一条用分号（;）隔开的属性都是一条声明

这样一个选择器加上一个大括号和大括号里面的声明块称作一条规则，CSS就是由一条条样式规则组成的。

在页面中使用CSS

在页面中使用CSS有三种方式：
- 外链
  <link rel="stylesheet" href="/assets/style.css">
- 嵌入
  <style> li{margin:0; list-style:none;} p{margin:lem 0 ;} </style>
- 内联
  <p style="margin:lem 0">Example Content</p>

一般使用外链，能够实现内容和样式的分离，关注点分离，不推荐内联，仅在使用组件库的时候可能会用到。

CSS的工作原理

浏览器加载HTML文件后开始解析HTML文件，形成DOM树
解析过程中对于文件中的CSS代码进行加载、解析，并将样式添加到DOM节点中
DOM树创建完成后，展示页面

选择器

如果你要在HTML元素中设置CSS样式，你需要在元素中设置"id" 和 "class"选择器

选择器用于找出页面中的元素，以便给他们设置样式

有多种方式选择元素，按照标签名、类名或 id；按照属性；按照DOM树中的位置（单独使用与组合使用都可以）

一些基本选择器就不在这一一列出了，详细参考MDN文档
CSS选择器

伪类选择器

状态型伪类 :+状态 不是具体的值，而是元素处于某种特定的状态，比如：

a:hover{color: red;}

结构型伪类:+在dom树中的位置 根据在dom树中的位置来决定选择的元素,比如：

li:first-child{color: red;}

组合选择器

名称	语法	说明	示例
直接组合	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

选择器组

用于给不同条件的选择结果设置同样的样式，示例：

选择器1,选择器2,...不同选择器用“,”间隔

选择器的特异度

选择器组的特异度可以近似视为位数
个数id选择器可以看作百位级，（伪）类选择器可以看作十位级，标签选择器可以看作个位级

继承

某些属性会自动继承其父元素的计算值，除非显式指定一个值

一般和文字相关的属性会被继承
一般和盒模型相关的属性不会被继承,想要继承，需要使用关键字inherit也就是显式继承

CSS的求值过程

初始值

求值过程

resolving是处理能通过html和css直接计算的值
formatting是处理根据浏览器窗口大小计算的值

布局

确定内容的大小和位置的算法

依据元素、容器、兄弟节点和内容等信息来计算

常见布局方式

box盒子模型

box-sizing: content-box

每种元素都被视为一种盒子

行级盒子和块级盒子的区别 | Bloc Level Box | Inline Level Box | | --- | --- | | 不和其他盒子并列摆放 | 和其他行级盒子一起放在一行或拆开成多行 | | 适用所有的盒模型属性 | 盒模型中的width、height不适用 |
行级盒子、块级盒子、行级元素、块级元素区别与联系
行级盒子、块级盒子是CSS中的概念；行级元素、块级元素是HTML中的概念 | 块级元素 | 行级元素 | | --- | --- | | 生成块级盒子 | -生成行级盒子，内容分散在多个行盒中 | | body、article、div、main、section、h1-6、p、ul、li等 | span、em、strong、cite、code等 | | display:block | display:inline |

display属性 | block | 块级盒子 | | --- | --- | | inline | 行级盒子 | | inline-block | 本身是行级，可以放在行盒中；可以设置宽高；作为一个整体不会被拆散成多行 | | none | 排版时完全被忽略 |

行级排版上下文 IFC(Inline Formatting Context)

只包含行级盒子的容器会创建一个IFC

IFC 内的排版规则

盒子在一行内水平摆放
一行放不下时，换行显示
text-align 决定一行内盒子的水平对齐
vertical-align 决定一个盒子在行内的垂直对齐
避开浮动(float)元素

块级排版上下文 BFC(Block Formatting Context)

某些容器会创建一个BFC

根元素
浮动、绝对定位、inline-block
Flex子项和Grid子项
overflow 值不是 visible 的块盒
display: flow-root;

BFC 内的排版规则

盒子从上到下摆放
垂直 margin 合并（塌陷现象）
BFC 内盒子的 margin 不会与外面的合并
BFC 不会和浮动元素重叠

Flex 布局

一种新的排版上下文

它可以控制子级盒子的

摆放流向的(↕↔)
摆放顺序
盒子的宽度和高度
水平和垂直方向的对齐
是否允许折行

flex布局的主轴与侧轴

详细参考MDN文档 flex

Grid 布局

突破flex的流式布局

display: grid 使元素生成一个块级的 Grid 容器
使用 grid-template 相关属性将容器划分为网格
设置每一个子项占哪些行/列

float 浮动布局

float 属性指定一个元素应沿其容器的左侧或右侧放置，允许文本和内联元素环绕它。该元素从网页的正常流动（文档流）中移除，尽管仍然保持部分的流动性（与绝对定位相反）。

position 定位

position:relative

在常规流里面布局
相对于自己本应该在的位置进行偏移
使用top、left、bottom、right设置偏移长度
流内其他元素当他没有便宜一样布局

position:absolute

相当于该元素脱离了常规流
相对于最近的非static祖先定位
不会对流内元素布局造成影响

持续学习，CSS新特性还在不断出现

理解CSS | 青训营笔记