CSS是什么？

Cascading Style Sheets
用来定义页面元素的样式

```
设置字体和颜色
```
```
设置位置和大小
```
```
添加动画效果
```

页面中使用CSS

1.外链式 2.嵌入式 3.内联式

选择器Selector

找出页面中的元素，以便给他们设置样式
使用多种方式选择元素

```
按照标签名，类名或id
```
```
按照属性
```
```
按照DOM树中的位置 
```

1.通配选择器 *{}

2.id选择器 id名{}

3.类选择器类名{}

4.属性选择器属性值{}

5.伪类选择器（不基于标签和属性定位元素）分为：状态伪类；结构性伪类

状态伪类：

结构性伪类：

6.选择器组合：

颜色

1.rgb

2.hsl

3.alpha透明度

字体font-family

通用字体族：

选择器的特异度越高优先级越高

初始值

CSS中，每个属性都有一个初始值
可以使用initial关键字显示重置为初始值

布局（Layout）是什么？

确定内容的大小和位置的算法
依据元素，容器，兄弟节点和内容等信息来计算

布局相关技术

1.常规流（行级，块级，表格布局，FlexBox，Grid布局）； 2.浮动； 3.绝对定位

盒模型： padding内边距，border边框，margin外边距

overflow属性（溢出容器）

块级and行级

行级排版上下文：

inline Formatting Context（IFC）
只包含行级盒子的容器会创建一个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 Box

FLexibility

可以设置子项的弹性：当容器有剩余空间时，会伸展；容器空间不够时，会收缩。
flex-grow有剩余空间时的伸展能力
flex-shrink容器空间不足时收缩的能力
flex-basis没有伸展或收缩时的基础长度

Grid布局（相较于flexbox，grid相当于二维布局）

position属性

属性值：

1.static 默认值，非定位元素

2.relative 相对自身原本位置偏移。不脱离文档流

3.absolute 绝对定位，相对非static祖先元素定位

4.fixed 相对于视口绝对定位

理解CSS | 青训营笔记