这是我参加字节第四届青训营的第2天

一、CSS选择器优先级

 优先级的计算规则：内联 > ID选择器 > 类选择器 > 标签选择器。

优先级是由 A 、B、C、D 的值来决定的，其中它们的值计算规则如下：

如果存在内联样式，那么 A = 1, 否则 A = 0;
B 的值等于 ID选择器 出现的次数;
C 的值等于 类选择器 和 属性选择器 和 伪类 出现的总次数;
D 的值等于 标签选择器 和 伪元素 出现的总次数。

覆盖：

当样式属性相同的情况下，遵循优先级高的覆盖优先级低的，后面的覆盖前面的原则。

继承：

当样式属性没有设置且可以继承的时候，某些属性会自动继承父元素中的样式属性计算值，除非显式指定一个值。

CSS里一般和文字相关的属性都是可继承的

此处继承的是样式的计算值，而不继承相对值。也可用inherit属性值来进行显式继承。*{}

初始值：

属性的默认初始值

CSS中的每个属性都有一个初始值。
- background-color的初始值为transparent
- margin-left的初始值为0
可以使用initial关键字显式重置为初始值
- background-color：initial

二、CSS求值过程

计算值和使用值的区别： 浏览器拿到CSS或HTML之后，就能够转化计算出来的值为计算值；使用者需要实际布局中才能得到的值为使用值。继承的属性值是计算值。

三、布局（Layout）是什么？

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

1.布局相关技术

常规流
- 行级，块级，表格布局，FlexBox，Grid布局
浮动
绝对定位

2.盒模型：

盒模型一共有两种，分别为content-box 和 border-box，

1.content-box：

width和height只包含content

width：

```
 指定content box宽度
```

 取值为**长度、百分数、auto**

 auto由浏览器根据其他属性确定

 百分数相对于容器的content box宽度

height：

```
指定content box高度
```
```
取值为**长度、百分数、auto**
```
```
auto取值由内容计算得来
```

百分数相对于容器的content box高度

**容器有指定的高度时，百分数才生效**

padding内边距：

指定元素四个方向的内边距，10px 20px 10px 20px（上 右 下 左）

```
百分数相对于容器宽度
```

border：

指定容器边框样式、粗细和颜色

当四条边框颜色不同时，

当容器宽度高度设置为0（粗细设置为0），只剩边框，再设置不同颜色

margin外边距：

```
指定元素四个方向的外边距
```

取值可以是长度、百分数、auto

```
百分数相对于容器宽度
```

**margin collapse **：例如上下两边距是100，中间实际边距也为100，垂直方向边距的合并，只会选两者中较大的边距

2.border-box：

width和height由content + padding + border组成。

需注意的是，当width和height的值设为百分比时，其基数取决于父元素的对应属性，而当padding、margin、border取百分比时基数都取决于父元素的width。

盒模型的转换可以使用box-sizing属性进行转换，对应值分别为content-box和border-box。

over-flow溢出：

取值为四种，分别为visible、hidden、scroll、auto。

3、布局规则

块级盒子和行级盒子（CSS）

块级元素和行级元素（html）

display：

可以通过display属性进行块级盒子与行级盒子的转换。

常规流Normal Flow：

①行级排版上下文

```
Inline Formatting Context(IFC)
```

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

IFC内的排版规则
 -  盒子在一行内水平摆放，从左到右
 -   一行放不下时，换行显示
 -   text-align决定一行内盒子的水平对齐
 -   vertical-align决定一个盒子在行内的垂直对齐
 -   避开浮动（float）元素*

②块级排版上下文

```
 Block Formatting Context（BFC）
```

 某些容器会创建一个BFC
 -    根元素
 -    浮动、绝对定位、inline-block
 -    Flex子项和Grid子项
 -    overflow值不是visible的块盒
 -    display：flow-root

BFC内的排版规则
- 盒子从上到下摆放
- 垂直margin合并
- BFC内盒子的margiin不会与外面的合并
- BFC不会和浮动元素重叠

③Flex Box

一种新的排版上下文
它可以控制子级盒子的：
- 拜访的流向（→←↑↓）默认从左到右
- 摆放顺序
- 盒子的宽度和高度
- 水平和垂直方向的对齐
- 是否允许折行

④Grid布局

display：grid

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

grid line 网格线

{ grid-area：1/1/3/3； }

float 浮动

position 属性

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

最后，充分利用MDN和W3C CSS规范去深入学习

【深入CSS】青训营笔记03