类型声明是最好的文档，而类型编程可以类型声明发挥到极致。类型编程是TS高手必备技能，掌握TS编程可以帮助我们的阅读理解框架源码、设计产出自己的类库及文档。本将深入讲解`映射类型`和`infer`，给出丰满的案例及TS编程题，带你由浅入深的掌握TS类型体操。




# 类型编程基础
- TS 类型本身就是一个很复杂的、独立的语言，不仅仅是 JS 的增强和类型注释，类型编程是TS的精髓
- 学习TS类型编程需要一定的TS功底，`函数重载`、 `交叉类型`、 `泛型`、 `索引类型`、 `映射类型`、 `infer`要提前掌握，前三种类型前面的课程已讲述，而`索引类型`、 `映射类型`、 `infer`比较偏编程，故意放在这一章节讲解。

## 索引类型
- `keyof T` T的所有字面量的集合
- 泛型中通常这样写`K extends keyof T`
    - `K` 是 `T` 的所有属性字面量集合
    - `T[K]` 为 `T` 的所有属性值字面量集合

```ts
interface Person {
    name: string;
    age: number;
}
type Key = keyof Person; // Key 等同于 'name' | 'age'


type ObjAddNullByKey<T, K extends keyof T> = {
    [P in keyof T]:  K extends keyof T ? (T[P] | null) : T[P];
}

var p: Person = {
    name: '小花',
    age: 2, // 这里不能写null
}
var p1: ObjAddNullByKey<Person, 'age'> = {
    name: '小花',
    age: null, // 这里可以写 null
}
```

# 映射类型 
- 可以非标准粗暴的理解TS类型编程起始于映射类型，从映射类型开始TS类型编程编的有意思了。
- 映射类型的用途
    - 类型转换（包装 or 拆包） 只读、可选、挑选、复制
    - 集合运算 交差并补 


## 类型转换（包装 or 拆包）
- Ts内置了一些最基础的泛型工具方法 如： `Readonly` `Partial` `Required` `NonNullable`
- 这里类比实现了 `Mutable`  `Nullable` `DeapReadonly`

```ts
// Person ---> PersonReadonly ---> Person
interface Person {
    name: string;
}
type MyReadonly<T> = {
    readonly [P in keyof T]: T[P];
}
var zs: MyReadonly<Person> = {name: 'zs'};
// zs.name = 'ls' // 这里报错不让改

// 可变的（即移除readonly）
type Mutable<T> = {
    -readonly [P in keyof T]: T[P]
}
// typeof zs 取出js对象的数据类型，这里即 MyReadonly<Person>
var zs2:Mutable<typeof zs> = zs;
zs2.name = 'zs2';

// 类似的还有 Partial Require
type MyPartial<T> = {
    [P in keyof T]?: T[P] | undefined
}
const ls: MyPartial<Person> = {};

type MyRequired<T> = {
    [P in keyof T]-?: T[P];
}
let ww: MyRequired<typeof ls> = {
    name: 'ww' // 这里不能注释，必须写name
}

// NonNullable
type NullName = string | null | undefined;
let zl: NullName = null;
let sunqi: NullName & {} = 'sunq' // sunqi: string
let sunqi2: NonNullable<NullName> = 'sunq' // sunqi: string

/**
 * type NonNullable<T> = T & {}
 * T & {} 如何理解?
 * 如果是联合类型 比如 `string | null | undefined` 会依次与 `{}`进行 `&` 运算
 * string & {}   得到 string
 * null & {}     得到 never
 * undefined & {} 得到 never
 * string | never | never 得到 string
 */

type Nullable<T> = T | null | undefined;
const zhouba: Nullable<string> = null;

type DeapReadonly<T> = {
    readonly [P in keyof T]: T[P] extends object ? DeapReadonly<T[P]> : T[P]
}
const wujiu: DeapReadonly<{
    name: string,
    info: {
        addr: string
    }
}> = {
    name: 'wujiu',
    info: {
        addr: 'shanghai'
    }
}
// wujiu.info.addr = 'nanjing' // 这里会报错不让改
```

## 集合运算
- TS内置了 `Pick` `Extract` `Exclude` `Omit`
- `Merge`可以用 `|` 实现
- `Comple`可以用 `Exclude` 反过来运算
```ts
// 挑选 Pick
type MyPick<T, K extends keyof T> = {
    [P in K]: T[P];
}
const zs: MyPick<{
    name: string,
    age: number,
}, 'name'> = {
    name: 'zs',
    // age: 12, // 这里不允许
}
// TS内置的交叉并补是针对字面量类型
// 交集 Extract  T和U共同的字面量
type MyExtract<T, U> = T extends U ? T : never;
const ls: MyExtract<'a'|'b', 'b'> = 'b'; // 只能是'b', 不能写'a'

// 差集 Exclude T - U
type MyExclude<T, U> = T extends U ? never: T
const ww: Exclude<'a' | 'b', 'b'> = 'a'; // 只能是'a', 不能写'b'

// 并集 用联合类型实现即可
type Merge<T, U> = T | U;
const words: Merge<'a' | 'b', 'b'| 'c'> = 'c' // 也可以是'a'或'b';

// 补集  差集反着来
type Comple<T, U> = U extends T ? never : U
const words2: Comple<'a' | 'b', 'b' | 'c'> = 'c' // 只能是 'c'


// 踢出Omit Pick的反义词
type MyOmit<T, K extends keyof T> = {
    [P in Exclude<keyof T, K>]: T[P]
}
const zl: MyOmit<{
    name: string;
    age: number;
    sex: 1 | 2
}, 'sex' | 'age'> = {
    name: 'ls',
    // age: 23, //  不允许
}
```

## 映射类型 是如何复制的？
```ts
type Copy<T> =  {
  [P in keyof T]: T[P]
}
interface Person {
  readonly name: string;
  age?: number;
  sex: 1 | 2;
}
const p: Copy<Person> = {
  name: 'zs',
  sex: 1,
}
p.age = 12
// p.name = 'ls'; // 无法为“name”赋值，因为它是只读属性。ts(2540)
```

# 映射类型面试题
## 实现一个C类型, 先继承A的所有属性，再继承B的所有属性并将其设置为可选属性（不包括A拥有的）
```ts
interface A {
    name: string;
    age: number;
}
interface B {
    age: number;
    sex: 1 | 2
}

interface C {
    name: string;
    age: number;
    sex?: 1 | 2;
}
// 要求 C由A和B得到
type C1<A, B> =  {
    [P in keyof A] : A[P];
} & {
    [P in Exclude<keyof B, keyof A & keyof B>]?: B[P] 
}

const c: C1<A, B> = {
    name: 'zs',
    age: 12,
}
c.sex = 1;
```
## 合并接口，判断符合条件的值是否存在， 不存在就是never
```ts
// 合并接口，判断符合条件的值是否存在， 不存在就是never
interface A {
    a: string;
    b: number;
}
interface B {
    a: number;
    b: number;
    c: boolean;
}

// C类型是A类型和B类型运算得到
interface C {
    b: number;
}
/**
 * 思路分析： 
 * - A.b与B.b属性值相同，要过滤掉属性b，可以通过映射类型过滤，但是这里的难点是根据值类型过滤
 * - 如果是单纯过滤值类型的过来可以根据字面量 {[P in T]: T[P]}[keyof T]
 * - 我们可以把属性值类型相同的属性作为字面量原封不动的赋值给值，不相同的属性其值赋值为 never 在过滤掉 never, 得到属性字面量集合
 */

// 过滤T类型中属性值为U类型的Key
type Keys<T, U> = {
    [P in keyof T]: P extends keyof U
        ? T[P] extends U[P]
            ? P
            : never
        : never
}[keyof T]
type AB<A, B> = {
    [P in Keys<A, B>]: A[P]
}

var a: AB<A, B> = {
    // a: 'zs',  // 这里报错
    b: 23,
}

// 方法二
type MyExtract<A extends object, B extends object> = {
  [P in keyof A as P extends keyof B 
    ? A[P] extends B[P]? P : never
    : never
  ]: A[P]
}
```

# infer
泛型固然强大，但描述多个泛型之间的约束关系有限，通常是表示一对一关系的约束，多个泛型之间的关系参数类型及返回值类型之间的关系无法描述，这里就需要`infer`(约束类型)登场了。
- `infer` 语法 `T extends U ? X : Y`
    - `infer`只能在条件类型的`extends`子句中使用， （必须在`entends`后面）
    - `infer`得到的类型只能在`true` 语句中使用，即`X`中使用
## `ReturnType`、`InstanceType`、`Parameters`
```ts
// ReturnType
function getStr(arg: number | boolean | string | object | null | undefined) {
    if(typeof arg === 'string') {
        return arg;
    }
    if(typeof arg === 'undefined') {
        return '';
    }
    if(typeof arg === 'object' && !arg) {
        return '';
    }
    return arg!.toString();
}
var a: ReturnType<typeof getStr> = 'abc' // a: string

type MyReturnType<T extends (...args: any) => any> = T extends (...args: any) => infer R ? R : any;
var b: MyReturnType<typeof getStr> = 'ab' // b: string

// Parameters 获取参数类型
// type Parameters<T extends (...args: any) => any> = T extends (...args: infer P) => any ? P : never;
// 我们写个不一样的，获取第二个参数的类型
type GetSecondParam<T extends (...args: any) => any>
    = T extends (first: any, second: infer S, ...rest: any) => any
        ? S : never;

function getSecondParam(a: string, b: number) {
    console.log(a, b);
}
const secondType: GetSecondParam<typeof getSecondParam> = 123 // secondType: number

// InstanceType 获取实例类型
type MyInstanceType<T extends new (...args: any) => any>
    = T extends {
        new (...args): infer R
    } ? R : any;

let obj: MyInstanceType<{
    new (...args: any): {
        name: string;
        age:number;
    }
}>; // obj: { name: string; age: number; }
```
##  更多infer案例
- 获取数组类型
- 推断`Promise`成功值的类型
- 推断字符串字面量类型的第一个字符对应的字面量类型
- 推断数组方法。。。
- 推断字符串方法
```TS
// infer可以获取数组类型
type ArrayType<T> = T extends (infer R)[] ? R : any;
var arr: ArrayType<number[]>; // arr: number
// 获取数组最后一个元素的类型
type ArrayLast<T> = T extends [...infer _, infer Last] ? Last: never;
var last: ArrayLast<[string, 's', false]>; // last: false // 获取元组最后一个类型

// 推断Promise成功值的类型
type InferPromise<T> = T extends Promise<infer T> ? T : never;
type Resp = InferPromise<Promise<string>>; // Resp: string

// 推断字符串字面量类型的第一个字符对应的字面量类型
type InferString<T extends string>
    = T extends `${infer First}${infer _}`
    ? First
    : [];

type word = InferString<'First' | 'Second'>; // word: 'F' | 'S'

// 综合案例
type Shift<T> = T extends [infer First, ...infer Rest] ? [...Rest] : [];
var a1: [number, string] = [1,'2'] ;
const result: Shift<[number, string]>[0] = 'str'; // result: string

type Pop<T extends any[]> = T extends [...infer L, infer R] ? [...L] : [];
type Reverse<T extends unknown[], U extends unknown[] = []>
    = T extends []
        ? U
        : T extends [infer L, ...infer R]
            ? Reverse<R, [L, ...U]>
            : U;

type A2 = Reverse<[string, number, boolean]>; // A2: [boolean, number, string]

type FlipArguments<T extends Function>
    = T extends (...arg: infer R) => infer S
        ? (...arg : Reverse<[...R]>) => S
        : T;

type StartsWith<T extends string, U extends string>
    = T extends `${U}${infer R}` ? true : false;

type TrimLeft<S extends string> 
    = S extends `${infer L}${infer R}`
        ? L extends ' ' | '\n' | '\t'
            ? TrimLeft<R>
            : S
        : '';

type Trim<S extends string>
    = S extends `${' ' | '\t' | '\n'}${infer R}`
        ? Trim<R>
            : S extends `${infer L}${' ' | '\t' | '\n'}`
            ? Trim<L>
        : S;

type StringToUnion<T extends string, U = never>
    = T extends ''
        ? U
        : T extends `${infer L}${infer R}`
            ? StringToUnion<R, U | L>
            : U;

var str: StringToUnion<'abc'> // str: 'a' | 'b' | 'c'
```

# 类型体操准备
下一篇将记录TS类型体操刷题，在此之前先总结一下类型编程的知识点及技巧，这样刷题的时候不至于太郁闷。

## extends
- TS泛型通过`extends`实现条件分支逻辑
- 也是通过它实现循环递归逻辑（循环要借助递归模拟）
- 继承的规则是怎样的呢?
    - `T extends T` VS `[T] extends [never]`
    - `T extends true`
```ts
type TestExtends<T> = T extends T ? true : false;
// 传入基本类型都是true 包括 boolean number string bigInt null undefined void any unknown
// 传入 Symbol 得到 true
// 传入never得到never 那怎样判断never呢？
type isNever<T> = [T] extends [never] ? true : false;

type TestExtendsTrue<T> = T extends true ? true: false;
// 只有 never 和 true  会得到true 其他都是false
```
## 分布式条件类型特性
- 联合类型使用 `extends` 会进行展开运算 被称为条件分支类型
```ts
type StringOrNumber<T> = T extends string ? string : number;
type C = StringOrNumber<'world' | 7>;  // 类型为 string | number
```

## 判断类型
- 判断是否是空对象 `T extends {[k: string]: never}`
- 判断是否是`never` `[T] extends [never] ? true : false`
- 判断是否是联合类型  [TS类型体操 IsUnion](https://github.com/type-challenges/type-challenges/blob/main/questions/01097-medium-isunion/README.md)
```ts
type IsUnion<T, C extends T = T>
  = (
      T extends T
      ? C extends T
        ? true
        : unknown // 联合类型
      : never
    ) extends true ? false : true;
type A = unknown extends true ? false : true; // true
type B = never extends true ? false : true; // false
type C = true extends true ? false : true; // false
```
## 类型转换技巧
- `keyof T` 获取对象类型`key`得到字符串字面量类型
- `T[keyof T]` 获取对象类型所有`Value`得到的联合类型
- `[P in keyof T]` 映射`key`
- 交叉类型编辑器提示不优好，可以使用映射聚合为一个类型
- `{[P in keyof T as P extends U ? P : never ]}` 将`key`变为`never`进而实现过滤`key`的效果，该方式同样可以过滤值类型 具体案例 **TS类型体操Readonly2 [题目](https://github.com/type-challenges/type-challenges/blob/main/questions/00008-medium-readonly-2/README.md)   [答案](https://blog.warmplace.cn:11443/post/8#Readonly2)**
- `T[number]` 获取数组元素的枚举值
- 联合类型转对象可以用`in`
- 给一个对象增加属性，但禁止重复添加，怎么办？ 具体案例 **Chainable Options [题目](https://github.com/type-challenges/type-challenges/blob/main/questions/00012-medium-chainable-options/README.md)   [答案](https://blog.warmplace.cn:11443/post/8#%E5%8F%AF%E4%B8%B2%E8%81%94%E6%9E%84%E9%80%A0%E5%99%A8)**
```ts
interface Per{
    name: string;
}
type AddProp = <T, K extends string>(
    obj: T,
    key: K extends keyof T ? never: K,
    val: any,
) => any;

const addProp: AddProp = function(obj, key, val) {
    // ...
}
addProp({name: 'zs'}, 'age', 12); // ok
addProp({name: 'zs'}, 'name', 'ls'); // 报错 不能添加重复属性
```
- `string` 与 `number` 的转换 
```ts
type ParseInt<T extends string> = T extends `${infer Digit extends number}` ? Digit : never
```
- 对象类型转换注意事项
```ts
// 类型转换问题 仔细看三种Omit的问题
// 该案例在类型编程中很有意义
type MyOmit1<T, K extends keyof T = keyof T> = {
  [P in Exclude<keyof T, K>]: T[P];
}
type MyOmit2<T, K extends keyof T = keyof T> = {
  [P in keyof T as P extends K ? never : P]: T[P];
}
type MyOmit3<T, K extends keyof T = keyof T> = 
    Pick<T, Exclude<keyof T, K>>

interface User {
    name?: string
    age?: number
    // readonly age?: number
}

type AA = MyOmit1<User, 'name'> // AA: { age: number | undefined; }
type BB = MyOmit2<User, 'name'> // BB: { age?: number | undefined; }
type CC = MyOmit3<User, 'name'> // BB: { age?: number | undefined; }
// 总结， 直接在对象里通过范型函数过滤属性的方式 会丢失属性的 可选、可读 特性
```

# 参考资料
- [TS进阶之infer](https://juejin.cn/post/7110582223052472328)
- [TS中文文档](https://www.tslang.cn/docs/home.html)

TypeScript类型编程（五）

CSS布局方案与应用

CSS盒模型与布局

本文系统梳理CSS基础知识及面试常见问题。详细介绍了样式继承、CSS单位、CSS行高、CSS选择器及优先级、脚本化CSS等。



# 面试题

开门见山，先说一说CSS基础相关面试题

1. `position`属性有哪些值，`absoluted`相对于谁定位？
1. 关于样式继承 说一说`inhert` 、`initial`、`unset`、`revert` 之间的区别 
1. css是如何工作的？它的解析顺序是什么？如何降级？
1. 你知道哪些css单位，如何进行适配移动端适配， 等比放大方案`rem`、`vw`
1. `line-height` 行高如何计算?
1. 你知道有哪些CSS选择器？它们的优先级如何计算？说一说常见的伪类选择器
1. CSS文件用什么字符编码呢？
1. `link`和`@import`都能导入一个样式文件，它们有什么区别吗？



- CSS 全称 Cascading Style Sheets **层叠样式表，将网页的内容与样式进行分离**。
- 层叠：应用文档中任何给定元素的样式规则是各个来源的“层叠”效果
    - web浏览器的默认样式
    - 文档的样式表
    - 每个独立的html元素的style属性


# 入门基础
## CSS概述
- 语法  `选择器 { 属性:属性值;//...}`
    - ![image.png](https://blog.warmplace.cn:11443/static/img/a9af6ca2a777342af04f2b9c3a417d2e.image.webp)
- 仅支持多行注释`/* ... */`，不支持单行注释 `//`
- 计算样式： 计算的结果，一组用于实际显示元素的样式属性和值
    - `document.styleSheets`
- 属性： 定义视觉特性某一指标的变量
- 复合属性： 经常在一起使用的样式属性组合起来使用一个特殊的复合属性
    - 比如`font`由`font-family`、`font-size`、`font-weight`组成
- 非标准属性： 浏览器尝试实现的非标准CSS属性， 在属性名前面加一个厂商前缀。
    - Firefox `-moz-`
    - Chrome `-webkit`
    - IE `-ms-`

定义样式的两种方式
- 行内样式也称内联样式
    -   形如 `style="margin-top:20px;color:red;"`
- 定义样式表 
    - `.p {text-index: 5in; color: red;}`
    - `<link rel="stylesheet" href="mystyles.css" type="text/css">`

## @规则
CSS 规则是样式表的主体，通常样式表会包括大量的规则列表。但有时候也有需要在样式表中包含一些其他的信息，比如字符集，导入其它外部样式表，字体等，这些需要专门的语句表示--即`@规则`
- [`@namespace`](https://developer.mozilla.org/zh-CN/docs/Web/CSS/@namespace) 告诉css引擎必须考虑XML命名空间
- [@media](https://developer.mozilla.org/zh-CN/docs/Web/CSS/@media) 如果满足媒体查询的条件则规则组里的规则生效
- [@page](https://developer.mozilla.org/zh-CN/docs/Web/CSS/@page) 在打印文档时修改某些CSS属性。
- [@font-face](https://developer.mozilla.org/zh-CN/docs/Web/CSS/@font-face) 指定了一个用于显示的自定义字体
- [@keyframes](https://developer.mozilla.org/zh-CN/docs/Web/CSS/@keyframes) 描述CSS动画的关键帧
- ~~[@document](https://developer.mozilla.org/zh-CN/docs/Web/CSS/@document)  如果文档样式表满足给定条件则条件规则组里的规则生效。 (推延至 CSS Level 4 规范，又被移除)~~
- `@charset "UTF-8";` 定义样式所使用的字符集
- `@import` 用于告诉CSS引擎引入的一个外部样式表
- @supports 用于查询特定的CSS是否生效，可以结合not、and 和 or等一起使用。
```css
/* 如果支持自定义属性，则把body颜色设置为变量varName指定的颜色 */
@supports(--foo: green) {
    body {
        color: var(--varName);
    }
}
```

## CSS文件用什么字符编码呢？
某个样式表文件到底用什么字符编码，浏览器一套识别顺序（优先级从高到低）：
- 文件开头的`Byte Order mark`字符值，一般编辑器并不能看到文件头里的BOM值，要使用十六进制编辑器；
- HTTP响应头里的 `content-type`字段包含的`charset`所指定的值，比如 `Content-type: text/css; charset=utf-8`
- CSS头里定义的@charset规则里指定的字符编码
- `<link>`标签里的charset属性，该条已在HTML5中废除
- 默认就是 `UTF-8`

## link 和 @import的区别
- link是HTML标签，除了能导入CSS外，还能导入别的资源，比如图片`favorite.ico`、脚本和字体等；而@import是CSS语法，只能用来导入CSS;
- link导入的样式不会阻塞DOM解析，它是并行下载，@import则是需要等页面加载完成后再加载
- link可以通过JS操作DOM动态引入样式表改变样式，而@import不可以



## 重要的CSS属性
### `position`
它指定了应用到元素的定位类型
- `static`      默认属性 置顶元素按照常规的文档流进行定位
- `absolute`    指定元素相对于它包含的元素进行定位。脱离文档流，要么相对于最近定位的祖先元素，要么是相对于文档本身（html标签的父元素）
- `fixed` 该值相对于浏览器窗口进行定位。固定定位的元素总是显示在那里，不随文档其他部分而滚动。脱离文档流
- `reactive`    按照常规文档流进行定位，它的定位相对于它在文档流中的位置进行调整
- `sticky`      生成粘性定位的元素， 容器的位置根据正常文档流计算得出

注意事项：
- `absolute`｜`sticky`｜`fixed`会受到`transform` | `perspective` | `filter`属性的影响
    > position: fixed 能够相对于浏览器窗口放置有一个条件，那就是不能有任何祖先元素设置了 transform、perspective 或者 filter 样式属性。 [引用自vue Teleport](https://cn.vuejs.org/guide/built-ins/teleport.html)
- `z-index` 只对兄弟元素叠加应用效果

颜色、透明度、半透明度
- 颜色定义的几中方法
    - 十六进制 `#fafafa` `#eee`
    - rgba  `rgba(255,255,255, 0)` 最后一位是透明度 `【0, 1】`
    - HSL （色相-饱和度-值）
- 透明度 
    - `opacity` 取值`【0, 1】` IE 用 `filter` `filter: alpha(opacity=75)`
- 部分可见 `overflow` 和 `clip`

## 样式继承
继承的理解：设置在父元素或祖先元素上的样式被子元素继承。
- 不可继承的CSS属性：`display`、`margin`、`border`、`padding`、`background`、`height`、`min-height`、`max-height`、`width`、`min-width`、`max-width`、`overflow`、`position`、`left`、`right`、`top`、`bottom`、`z-index`、`float`、`clear`、`table-layout`、`vertical-align`、`page-break-after`、`page-bread-before`和`unicode-bidi`。
- 所有元素可继承：`visibility`和`cursor`。
内联元素可继承：`letter-spacing`、`word-spacing`、`white-space`、`line-height`、`color`、`font`、`font-family`、`font-size`、`font-style`、`font-variant`、`font-weight`、`text-decoration`、`text-transform`、`direction`。
- 终端块状元素可继承：`text-indent`和`text-align`。
- 列表元素可继承：`list-style`、`list-style-type`、`list-style-position`、`list-style-image`

哪些属性属于默认继承很大程度上是由常识决定的。

### 控制继承
- `inherit`&emsp;&emsp;开启继承
- `initial`&emsp;&emsp;让当前属性恢复为默认值。
- `unset`&emsp;&emsp;&emsp;如果属性是自然继承那么就是 inherit，否则和 initial一样
- `revert`&emsp;&emsp; 当前属性的样式恢复为浏览器默认的样式
- `all`&emsp;&emsp;&emsp;&emsp;批量设置（如`all:unset`）, 值为以上四个值之一。

### initial与revert的区别
```html
<!doctype html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <style>
        .revert-ol {
            list-style: none;
        }
    </style>
</head>
<body>
    <ol class="revert-ol" style="list-style-type: revert">
        <li>ol标签浏览器内置的样式为 ol{ list-style-type: decimal }</li>
        <li>revert关键字可以让当前元素的样式还原成浏览器内置的样式</li>
    </ol>
    <hr>
    <ol class="revert-ol" style="list-style-type: initial">
        <li>CSS属性list-style-type的默认值对于disc</li>
        <li>initial关键字可以让当前属性恢复为默认值</li>
    </ol>
</body>
</html>
```

运行效果

<img src='https://blog.warmplace.cn:11443/static/img/b6de60abf17e5f18a9e11ab46eebfd6c.image.webp' width=400>

### `all:revert` 样式格式化

```html
<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<style>
		.ui-button {
			display: inline-block;
			line-height: 20px;
			font-size: 14px;
			text-align: center;
			color: #4c5161;
			border-radius: 4px;
			padding: 10px 15px;
			min-width: 80px;
			border: none;
			background-color: #2a80eb;
			color: #fff;
			box-sizing: border-box;
			font-family: inherit;
			cursor: pointer;
			overflow: visible;
		}
	</style>
</head>
<body>
	<button>button标签浏览器默认样式</button>
	<button class="ui-button">button.ui-button美美的按钮</button>
	<br><br><br>
	<button class="ui-button" style="all:initial">button.ui-button style="all:initial"</button>
	<button class="ui-button" style="all:revert">button.ui-button style="all:revert"</button>
</body>
</html>
```
运行效果

<img src='https://blog.warmplace.cn:11443/static/img/87cfe4f317a86fb1b14decfe519539db.image.webp' width=400>

参考资料： 
- [CSS inherit是继承，那initial和unset呢？](https://www.zhangxinxu.com/wordpress/2020/01/css-initial-unset/)
- [了解CSS revert全局关键字](https://www.zhangxinxu.com/wordpress/2021/02/css-revert/)

## CSS是如何工作的

![image.png](https://blog.warmplace.cn:11443/static/img/1b194ffdb87376257b2c50f744a6ea67.image.webp)

CSS解析方式： 从右往左（为了最快定位到目标元素）

### 常见问题
#### 当浏览器遇到无法解析的CSS会怎样？
浏览器什么也不会做，继续解析下一个CSS样式，错误的属性、值及规则都会跳过。（除了注释、CSS规则集及@规则外，定义的一些别的东西都将被浏览器忽略）。

#### CSS如何降级？
```css
.box {
    width: 500px; /* 不支持calc函数的浏览器将会降级为 500px */
    width: calc(100%-50px);
}
```
#### CSS有哪些样式表
- 内部样式表 `<style>`
- 行内样式表（内联式）`style`属性
- 外部样式表 (外链式) `<link rel="stylesheet" href="CSS的文件路径">`

#### CSS为什么不建议使用@import方式加载css？
- 首先`link`标签`href` 是异步加载，只有当前`css`文件被下载解析之后，浏览器才知道还有另外的一个`CSS`需要下载，这时候才去下载 解析构建 渲染等，
- 因此使用`@import`引起堵塞`css`解析延迟会加长页面白屏时间，所以要避免使用`@import` 尽量采用`link`标签方式引入。

## CSS 单位
![image.png](https://blog.warmplace.cn:11443/static/img/7c527038a3dd25606548ba3bef5146d9.image.webp)
1. `em` 相对长度单位。是相对于父元素的字体大小进行计算的。
   - 如果当前对行内文本的字体尺寸没被人为设置，则相对于浏览器的默认字体尺寸
   - 任意浏览器的默认字体都是`16px`，`1em=16px`,那么`10px=0.625em`。
   - 为了简化`font-size`的换算，需要在CSS中body选择器中声明 `font-size: 62.5%`，这就是的`em`值变为 `16px*62.5%=10px=1em` 也就是说只需要将你的原来的px数值除以10，然后换上em作为单位就行了.
1. `rem` 相对于跟元素（html）的`font-size`的单位。 >=IE9
    - 移动端通常使用`rem`做响应式，[具体实现点这里](https://blog.warmplace.cn:11443/post/4#%E7%A7%BB%E5%8A%A8%E7%AB%AFrem%E7%AD%89%E6%AF%94%E7%BC%A9%E6%94%BE%E6%96%B9%E6%A1%88)
1. `ex` `ch`排版用的单位
    - `ex` 只得是小写字母`x`的高度，不同字体小写`x`的高度是不一样的。
    - `ch` 与`ex`类似，它是基于数字`0`的宽度计算的，会随着字体的变化而变化。而`0`的宽度通常是对字体的平均字符宽度，它是一个估计值。由于`ch`是一个近似等宽的单元，所以在设置容器的宽度时很有用，比如一个容器想要显示指定个数的字符串时，就可以使用这个单位。![save.gif](https://static.warmplace.cn:11443/blog-resources/css/save.gif)
1. `vw`|`vh`|`vmax`| `vmin`
    - `vw`&emsp;&emsp;视窗宽度的百分比 网页视口高度的`1/100`
    - `vh`&emsp;&emsp;视窗高度的百分比
    - `vmax`&emsp;`vw`和`vh`的较大值
    - `vmin`&emsp;`vw`和`vh`的较小值
1. 绝对单位  `px` 、`pt` 、`pc`、 `cm`、 `mm`、`in`
    - `px`像素`Pixel` 相对于显示器屏幕分辨率
    - `1in` = `25.4mm` = `2.54cm` = `6pc` = `72pt` = `96px`
    - `1pc = 16px` `1pt = 1.3333px`
1. 百分比单位
    - 盒模型的百分比 **简单说就是相对于块级盒模型**
        - `width`、`max-width`、`min-width`：值为百分比时，其相对于包含块的 `width` 进行计算
        - `height`、`max-height`、`min-height`：值为百分比时，其相对于包含块的 `height` 进行计算；
        - `padding`、`margin`：值为百分比时，如果是水平的值，就是相对于包含块的 `width` 进行计算；如果是垂直的值，就是相对于包含块的 `height` 进行计算。
    - 文本中的百分比
        - `font-size`会继承父元素的`font-size`；
        - `line-height`根据`font-size`进行计算；
        - `vertical-align`根据`line-height`进行计算；
        - `text-indent`如果是水平的，则根据`width`进行计算，如果是垂直的，则根据`height`进行计算
    -   定位中的百分比 	**相对于定位的元素**
    -   变换中的百分比  	**相对于当前元素**
1. 屏幕尺寸
    - ![image.png](https://blog.warmplace.cn:11443/static/img/9a4a7096b52a481d9fddf8db0ef05aba.image.webp)
    - `window.screen.height` 屏幕高度  667
    - `window.innerHeight`   网页视口高度  553
    - `document.body.clientHeight` body 高度

## line-height
浏览器默认文字大小 `16px`  默认行高： `18px`（`inlne-height`） 行高 = 文字大小+上间距+下间距

行高的作用: 当行高值为父容器的高度时，可以让父容器中的文字垂直显示

当给一个独立的元素设置行高值的时候，除了以`px`为单位的行高值与文字大小无关，其他都与文字大小有关（与文字大小的积）


| 行高单位 | 赋值 |文字大小 | 行高值 |
| --- | --- |---| --- |
| `px` | `20px` |`20px` |  `20px`|
| `em` | `2em`  |`20px` |  `20px`|
| `%` | `200%` |`20px` |  `40px`|
| 不带单位 | `2` |`20px` |  `40px`|

盒子嵌套:
- 给父元素设置行高值，子元素的行高(子元素没有设置行高的情况下)可以实现继承，
- 如果设置的行高时具体数值比如2则子元素行高=子元素字体*2



| 行高单位 | 父元素`line-height` |父元素文字大小 | 子元素文字大小 |子元素行高值|
| --- | --- |---| --- | --- |
| `px` | `20px` |`20px` |  `30px`| **`20px`**|
| `em` | `2em`  |`20px` |  `30px`| **`40px`**|
| % | `200%` |`20px` |  `30px`| **`40px`**|
| 不带单位 | `2` |`20px` |  `30px`| **`60px`**|

## 盒模型
在页面中，每一个元素被表示成一个矩形的方框，被称为盒子。元素在页面中会生成盒子，一张页面由一个或多个盒子组成，这就是盒模型。
盒子从内到外由内容(`Content`)、内边距(`Padding`)、边框(`Border`)和外边距(`Margin`)组成，如下图：

![image.png](https://blog.warmplace.cn:11443/static/img/1d1c93b5d5d8cde60c1f17b792df81c8.image.webp)

关于盒模型内容比较多，将在我的下一篇文章[《CSS盒模型与布局》](/post/2)中讲解.

# CSS选择器
## 选择器分类
![CSS选择器.png](https://blog.warmplace.cn:11443/static/img/1f48d03131e9db6fb9895631bafa74bd.CSS%C3%A9%C2%80%C2%89%C3%A6%C2%8B%C2%A9%C3%A5%C2%99%C2%A8.webp)

## 选择器优先级

![image.png](https://blog.warmplace.cn:11443/static/img/78c4f2cd66be22c7ccaf7f612f959c5d.image.webp)

规则总结
1. `!important` > 内联样式 > ID选择器 > 【类选择器｜属性选择器｜伪类选择器】> 元素选择器 > 通配符选择器
    - 类选择器、属性选择器及伪类选择器，权重都一样不管是哪一种
        - 如有遇到属性选择器或伪类选择器>类选择器，请检查是否有选择器叠加
    - 关系(层次)选择器属于叠加选择器，请参考下面的权重计算
    - 伪元素选择器不与其他选择器冲突，故不参与比较
    - :root选择器优先于html元素选择器
1. 权重问题
    - 权重计算采用不进位制，即无论多少个class选择器叠加都小于ID选器器的优先级
    - 含多个权重的选择器优先级比较应该拆开来看，依次从高到底比较
    - 通过计数的方式比较，计数大的优先级高 
    - 相同权重后写的者优先（class属性值类的顺序不影响优先级）
        - 类选择器  a b c 属于嵌套关系 .a .c 与 .b .c 谁后写谁的优先级高

# JS操作CSS
## 脚本化内联样式
脚本化CSS最直接了当的方法是修改`style`属性。`style`属性的值是`CSSDeclaration`对象。
- `ele.style.fontSize = '24px'`
- `ele.setAttribute` | `ele.getAttribute`方法
- `ele.style.cssText = 'font-size:24px'`
注意：
- 有个特殊情况 `cssFloat`  （因为`float`是JS保留字）
- `IOS10`不支持`ele.style.xxx= 'XXX'`写法，推荐使用`setAttribute`方法

优点： 
- 设置样式非常方便

缺点： 
- 如果属性值带有单位，或者读取复合属性的值 解析就不那么方便

所以如果需要查询样式时，就需要使用计算样式

## 查询计算出的样式
`getComputedStyle(elt: Element, pseudoElt?: string | null): CSSStyleDeclaration`
与内联样式之间的异同

相同点
- 计算样式也是`CSSdeclaration`对象

不同点
- 但它是只读的
- 计算样式的值是绝对值
- 不返回复合属性
- 计算样式的`cssText`属性为定义

缺点
- 读取`fontFamily`属性时返回 `‘arial,helvetica,sans-serif’`的值，你无法获知系统使用的哪种字体
- 某些属性可能会得到`“auto”`，这也大概不是你想要的（可通过`ele.getBoundingClientRect`方法解决）

## 脚本化CSS类
- `ele.className = 'XXX'`
- `ele.classList` 该属性值是一个`DOMTokenList`对象，一个只读的类数组对象
  - `.add` `.remove` `.toggle` `.contains`方法
  - 该对象具有 “实时性”

## 脚本化样式表
- `document.styleSheets` `CSSStyleSheet`对象
- 开启or关闭样式表 `document.styleSheets[X].disable = boolean`
- 查询 `var firstRules = document.styleSheets[0].cssRules[0]` (IE是`.rules`)
- 增加规则 `.insertRules('XXX', index)`  IE `.addRules`
- 删除规则 `.deleteRules(index)` IE `.removeRules`
- 创建样式表 
    - 非IE8
        - `var s = document.createElement('style');` 
        - `s.innerHTML = '*{color:red;}';`
        - `document.head.appendChild(s);`
    - IE &&  <= IE8
        - `var s = document.createStyleSheet();`
        - `s.cssText = '*{color:red;}';`