CSS/JS/TS 概述｜ 青训营笔记

kiri
137 阅读10分钟

CSS 的深入

CSS1: 层叠的概念

CSS2：表现和内容分离

CSS3:更加丰富的样式

层叠三大规则：样式表来源，选择器优先级，源码位置

样式表重要来源 ：用户代理样式< 用户样式表<作者演示表（常用的）

选择器的优先级： 内联>id(a)>class=attribute=pseudo-class(b)>type=pseudo-element(c)

a b c

ul li .red 0 1 2

源码位置： 根据声明顺序进行判断，后面的声明会覆盖前面的申明 style标签会被后面声明的link标签覆盖

注意： 尽量少使用id，尽量少使用 ！import 自己的样式尽量放在引用库的后面

css 继承的样式继承

大部分的可以继承的样式是和文本相关

color font font-family 之类的

可以使用inherit 的属性选项从父元素继承

css 的值和单位

值： 文字类，关键字，颜色，位置，数组，百分比 ，函数生成 calc（），min（），max（）

单位： px pt cm in 相对长度 em rem ex vw，vh 角度 deg grad turn 时间 s ms 分辨率 dpi dpcm dppx

盒模型：margin border padding content

只有margin 可以进行负移动，负表示向上或者向左

简单案例

向上的三角形

<div id="app"></div>
​
#app{
  width: 0px;
  height: 0px;
  border-right: 50px solid transparent;
  border-left: 50px solid transparent ;
  border-bottom:  50px solid  red;
}

固定比例矩形

<div id="app"></div>
#app{
  background-color: red;
  height: 0;
  width: 100%;
  padding: 0;
  padding-bottom: 75%;
}

实现水平居中

<div id="app">
  <div class="son"></div>
</div>
​
#app{
  background-color: red;
  width: 100px;
  height: 200px;
}
.son{
   background-color: yellow;
   margin: 10px auto;
   width: 50px;
   height: 100px;
}

实现渐变框

<div id="app">
</div>
​
#app{
  width: 100px;
  height: 200px;
  border-radius: 5px;
  border:8px solid  transparent;
  background-origin: padding-box,border-box;
  background-clip: padding-box,border-box;
  background-image: linear-gradient(to right,pink ,pink),
                      /* 内部的背景图案*/
                     linear-gradient(135deg, #1941ab, #a557ef);
                     /* 边框背景图案*/
}
​

常规流的布局

外部显示类型：规定盒子如何与同一格式上下文中其他元素的显示

内部显示类型：规定盒子内部的布局方式

常规流里面的盒子，包括块级盒子和内联盒子 内联盒子和块级盒子一布局时 内联盒子会外部包裹一个匿名盒子进行BFC

块级格式布局（BFC---块级元素进行布局） ，内联元素之间会进行 内联格式化布局（IFC--内联元素之间进行布局）

如何触发BFC 特性（不管外面表现是什么，里出现新的块级布局，独立的块级布局）

display：flow-root | inline-block

position：absolute | fixed

float：不为none

overflow：不为visible

BFC 布局的垂直重叠

两个相邻上下边界会融合为更小的边界，这里应该增加padding 和border属性

内联格式上下文

line box 每个内联元素外面有line-box（一个一行大小想盒子），linebox的高是所包裹元素最高的顶部，低是所包裹元素最低的底部 （这两者相减就是line-height）减去内容区就是上下两个half-leading

单行文字进行居中

line-height 和 height 相等

icon和文字垂直对齐

内联元素设置vertical-align：middle 进行对齐

弹性布局

就是flex盒子布局 即使在宽高未的情况下也可以排列和分割一个盒子内部的布局

父盒子包括的属性 先要设置 display：flex；

  • flex-direction：row | row-reverse | column | column-reverse;
  • flex-wrap：nowrap | wrap | wrap-reverse;
  • flex-flow：（合并上面两属性）flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap
  • justify-content （在横轴上排列）： flex-start | flex-end | center | space-between | space-around;
  • align-items（在纵轴方向上的排列）： flex-start | flex-end | center | baseline | stretch;
  • align-content（二维排列）： flex-start | flex-end | center | space-between | space-around | stretch;

弹性盒子布局案例

文字前缀进行收缩的案例,当缩进文本宽度的时候整个字串只会缩进前缀文字

<div id="app">
  <span class="filename-base">
    this-file-has-a-really-long-filename.
  </span>
  <span class="filename-extention">
     pdf
  </span>
</div>
​
<style>
    #app{
display: flex;
}
.filename-base{
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.filename-extention{
  flex-shrink: 0;
}
</style>

色子 一点

<div id="app">
  <div class="dot-one"></div>
</div>
<style>
    #app{
  border-radius: 5px;
  border:2px solid black;
  width: 100px;
  height: 100px;
  margin: 10px auto;
  display: flex;
  /* 纵轴居中 */
  align-items: center;
   /* 水平轴居中 */
  justify-content: center;
​
}
.dot-one{
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: red;
}
</style>

色子 三点

<div id="app">
  <div class="dot-one"></div>
    <div class="dot-middle"></div>
    <div class="dot-end"></div>
</div>
<style>
    #app{
  border-radius: 5px;
  border:2px solid black;
  width: 100px;
  height: 100px;
  margin: 10px auto;
  display: flex;
  justify-content: space-around;
​
}
.dot-one,.dot-middle,.dot-end{
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: red;
}
.dot-middle{
  align-self: center;
}
.dot-end{
  align-self: flex-end;
}
</style>
​

层叠上下文

层叠上下文给上下文添加前后坐标z 元素沿着垂直屏幕的z轴进行展开

触发条件如下

postion ：relative 或者是 absolute 同时z-index 不是auto

position：fixed或者是sticky

flex或者grid 并且z-index 不是auto

opacity的值小于1

transform 的值不为none

will-change的值不为通用值

层叠上下文的顺序

根元素的背景和边框 ->z-index<0 -> block元素 -> float 元素 -> inline元素 ->触发条件-> z-index>0的元素->用户的眼睛

注意：z-index 只在一个层叠上下文比较，子元素的z-index无法超越父元素的层叠上下文比较

index 的值最好设置变量进行管理（在less scss），设置区间设置在 10或者 100 之间

css动画

transition：

设置关键帧：

@keyframes: 添加不同进度的动画

animation- 相关属性来添加动画

transform，transition，animation 的性能相关

计算布局（宽高位置等改名）-->文本，着色，边框改变会触发（reflow）GPU加速 --> 所有的图层进行合成

动画的执行顺序：

  1. 例如width 10% ->100% 重新进行布局
  2. 非合成层元素背景色的变化 需要cpu重新绘制主图
  3. 合成层元素文字进行变化 white ->red
  4. 合成层 transform opacity改变（不会影响性能）

优化策略：

1.尽量不要触发 reflow 属性

2.在性能问题时可以触发硬件加速 设置 will-change、设置 transform 3d

3.尽量使用transform 和 opacity 去写动画

响应式设置

媒体查询

在媒体属性满足一定的条件时才会触发一定的样式，可以用在 css 表里面也可以用在link 标签里面

//css
@media screen and （min-width：320px）and（orientation：landscape）{
​
} 
//符号一定的条件引入相应的样式
<link rel="stylesheet" media="screen and (max-width:600px)" href="smallscreen.css">

使用媒体查询的关键

1.同样遵循 覆盖原则，后面的样式会覆盖前面的（用大屏幕查询去覆盖更小屏幕的查询）

2.由于设备多样化，断点的选择根据内容选择

3.尽快能减少断点

设备像素

像素是显示器上绘制的最小单位，物理像素固定不变

dpi ：每英寸多少点

ppi：每英寸的像素数 分辨率 PPI =x/屏幕宽度=Y/屏幕高度

css 像素 是让人眼通过不同屏幕看到同比例的像素，同一个尺寸具有相同的css像素

设备像素比 DPR ： 设备像素/css 像素

移动端的viewport：

通过meta 标签规定 viewport 里面的属性

常用的设置
<meta name="viewport" content="width=device-width,initial-scale=1">

相对长度：

em字体大小单位，在非font-size属性中使用是相对于自身的字体大小，在font-size上使用是相对于父元素的字体大小（一般不在这个属性上使用，容易引起不必要的故障）

rem根元素字体大小，rem是相对根元素字体大小的值

vw ：视口宽度的1% vh 视口宽度的1%

css预处理语言

预处理器：less scss stlus

1.自定义变量

2.嵌套作用域

3.mixins 继承

4.操作符，条件，循环语句

语言增强 postcss

工程架构：css Module（css工程规范）

BEM 命名规范 ，vue-loader 的scope ，常用 css-loader postcss-module 将css 样式变为全局唯一的名称

css in js（将应用的css 样式写在js文件里面）

inline-style 代表 radium， unique classname styleed-component（css变为一个组件）

styleed-component ：

1.生成一classnaem 作为 componentId

2.生成 和唯一名关联的css字符串

3.唯一名对应的css 样式insert 到 head 和 style 中

4.将两个类名写到目标节点的class

原子化css tailwind 规定好了样式类，调用需要的类设置样式

JS 深入

基本知识：

JS 分为Brower 进程，GPU进程，渲染进程，插件进程，网络进程

渲染进程包括 GUI 线程，JS线程，事件触发线程，定时器触发线程，网络线程

JS线程和GUI线程是互斥的，为了保证效率，JS线程不可与GUI 不可同时运行，防止DOM反复进行渲染

JS 是一种动态语言（弱类型语言），java 是静态语言（强类型语言）有固定的类型

JS 函数式编程 ，解释类的语言 JIT, 安全

JS执行： 源代码 -语法分析/词法分析(执行上下文)->AST->字节码-编译执行->机器码

执行上下文：

变量环境,词法环境（放函数的），Outer（指向外部词法环境的指针），this，可执行代码

JS 只有三种上下文，全局执行上下文，函数执行上下文，EVAL执行上下文（不常用）

全局执行上下文，代码执行的时候会进行创建，将他压入栈底，每个生命周期只有一份

函数执行上下文：当一个函数进行执行的时候，这个代码内部的代码会被编译，生成变量环境，词法环境，当函数执行结束的时候该执行栈从栈顶弹出。

执行上下文干了什么事情，绑定this，创建词法环境，创建变量环境

如果在本级的执行上下文里面找不到会到上一级里面找全局上下文

ESP 记录单前执行状态的指针，ESP 移动会进行垃圾回收

闭包：内存不易删除，因为闭包依赖于一个对象 普通函数的this指向的是window，对象里面的 this执行指向对象

在构造函数里面

new 的操作： 创建临时对象，将this的指向临时对象，执行构造函数，返回临时对象

JS 垃圾回收

栈：ESP指针变化，原来的内存被覆盖

堆：分为新生区(对象区和空闲区 不断翻转)和老生区（长期留存的新生，和比较大的对象）

标记->清除-> 整理

事件循环：

主线程—>微任务-->宏任务

TypeScript深入

为什么学习TS？

是JS的超集，强类型，在编译的时候发现并进行纠错，不允许改变变量的数据类型

具有类型安全，下一代JS特性，完整的工具链

推荐学习链接

GitHub - dzharii/awesome-typescript: A collection of awesome TypeScript resources for client-side and server-side development. Write your awesome JavaScript in TypeScript TS开源的教程与应用

TypeScript: TS Playground - An online editor for exploring TypeScript and JavaScript (typescriptlang.org) TS在线学习

基本 类型

1.boolean number string

2.枚举类型 enum

3.any unknown void

4.never

5.数组[]

6.元组类型

TS 定义函数类型：

定义输入和输出的类型

输入参数：参数支持可选参数和默认参数

输出类型：输出可以自动判断，没有返回值时，默认void 类型

函数重载：函数名称相同参数不同，通过重载支持多种类型

定义接口：

规定一个函数的类型和变量，可选属性以及只读属性

类：

添加了 public private protected 修饰符

抽象类： 只能被继承，不能进行实例化

作为基类，抽象方法必须被子类实现

高级类型：

当一个变量可能出现多种类型的时候可以使用联合类型和交叉类型

1.联合类型 | 类型取并 2.交叉类型 & 3.类型断言手动指定类型 4 as 别名（给类型取名字尤其是高级类型）

interface 是 TS用来定义对象，type是用来定义类型别名

type可以定义基本类型，interface不行

interface可以合并重复声明，type不行

泛型：

灵活的类型规定，临时占位，根据输入的实参的类型进行规定类型

typeof：获取类型 keyof 获取所有的键 in 遍历枚举类型 T[K]:索引访问类型 extends 泛型约束

泛型工具类型：

Partial 将类型变为可选 Required:将类型变为必选 Readonly:将类型属性变为只读 ，pick Record

TS实战：

declare：三方库需要声明文件

.d .ts 声明文件定义

@types： 第三方TS类型包

tsconfig.json 定义TS的配置，约束后端接口的类型

对后端接口的约束

avatar
文章
阅读
粉丝