CSS的属性【all:inherit】有什么奥秘？-CFANZ编程社区

CSS

盒模型和box-sizing

内容(content)，内边距(padding)，边框(border)，外边距(margin)

标准：box-sizing: content-box; widtd=content

怪异：box-sizing: border-box; width= content+padding +border（推荐）

清除浮动

使用空标签清除浮动
在浮动元素后面添加一个空标签，并为其应用样式clear: both;

<div class="container">  
  <div class="float-box"></div>  
  <div style="clear: both;"></div>  
</div>

使用CSS伪元素清除浮动
使用:after伪元素在父容器的内容后面添加一个看不见的块级元素，并为其应用clear: both;样式。

.container::after {  
  content: "";  
  display: table;  
  clear: both;  
}

使用BFC清除浮动
为父元素设置

.container{
  overflow: auto/flow-root/hidden;
}

position定位居中

已知宽高，绝对定位+margin

.box { position: relative }

.center {
    position: absolute;
    top: 50%;
    left: 50%;
    height:xxx;
    width:xxx;
    margin-top: -height/2;
    margin-left: -width/2;
 }

已知宽高，绝对定位+margin

.box { position: relative	}

.center {
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
    width: 200px;
    height: 200px;
    margin: auto;		
}

未知宽高，绝对定位+transform

.box{ position: relative }

.center{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

未知宽高，flex+margin

.box { display: flex }

.center{ margin: auto }

块级格式化上下文 BFC

Block formatting context 块级格式化上下文，可以看做是元素的一种属性，当元素拥有这一种属性之后，会形成独立的渲染区域，内部元素的渲染不会影响到外界

开启BFC的条件：

根元素（<html>）
浮动元素（float不为none)
绝对定位元素（元素的position为absolute 或 fixed)
display为inline-block、table-cell、table-caption、table、table-row、table-row-group、table-header-group、table-footer-group、inline-table、flow-root、flex或 inline-flex、grid 或inline-grid
overflow值不为visible的块元素
contain值为layout、content 或 paint的元素
多列容器（元素的column-count或 column-width 不为 auto，包括column-count为1）

BFC的作用：

清除子元素浮动带来的影响
清除默认合并块元素的上下外边距
阻止元素被浮动元素覆盖

堆叠上下文

堆叠上下文决定了元素及其子元素在z轴（垂直于屏幕方向）上的显示顺序。当元素的定位属性（position）为relative、absolute、fixed或sticky时，该元素会生成新的堆叠上下文。在一个堆叠上下文中，元素按照其堆叠顺序（通过z-index属性指定）进行堆叠

scss定义全局变量

Vue下定义全局变量：通过（$）定义变量，并在【main.js】或【App.vue】中引入

JavaSrcipt

ES6+ 常用新语法和新特性

新语法
- 箭头函数：更简洁的语法来定义函数，不绑定自己的this值，更方便地处理回调函数和this指向问题
- 模板字符串：使用反引号（`${}`）来定义字符串，可以在其中插入变量或表达式
- 解构赋值：通过解构赋值从数组或对象中提取数据，赋值给变量
- 扩展运算符：（…）用于数组和对象的展开。
- 默认参数和剩余参数：使得函数参数的处理更加灵活
- let 和 const 声明：替代 var 关键字，提供了块级作用域，并且 const 声明的变量是不可变的
新特性
- Promise：异步编程的一种解决方案，用于处理异步操作，避免了回调地狱
- async/await：async声明函数为异步函数，之后函数内部可以使用 await 来等待 Promise 的请求结果
- Map 和 Set: 提供了更加灵活的键值对存储和集合操作
- 模块化 (Module)：ES6 引入了模块化的概念，使用 import 和 export 关键字来导入和导出模块

作用域和作用域链

作用域：指的是变量的可访问范围，JavaScript 中有全局作用域和局部作用域。
作用域链：当你要访问一个变量时，首先会在当前作用域下查找，如果当前作用域下没有查找到，则向上一级作用域进行查找，直到找到全局作用域，这个查找过程形成的链条叫做作用域链。
**作用：**起到隔离变量，防止冲突

原型和原型链

原型：每个对象都有一个原型，可以通过原型实现继承和共享属性

原型链：当试图访问一个对象的某个属性时，JS引擎会首先在该对象自身的属性中查找，如果没有找到，就会去它的原型对象上查找，如果还是没找到，就会继续去原型的原型上查找，直到找到为止或到达原型链的末尾（即Object.prototype）。这个过程中这种隐式的链条就构成了原型链。

Person.prototype = {
	height : 1400，
	lang : 4900
}
function Person (width){
  	this.width = width
}
var person1 = new Persion(200)

Person.prototype === person1.__proto__

闭包

当内部函数被保存到外部时，将会生成闭包。闭包会导致原有作用域链不释放，造成内存泄露。

作用：可以读取函数内部的变量，让这些变量的值始终保持在内存中。

function text(){
  var a = 1
  return function log(){
    console.log(a)
  }
}
text（）//如此，便通过return的方式把log函数就被保存下来了

网络请求二次封装

将网络请求操作进行封装，以提高代码复用性和可维护性，根据项目的需求和实际情况进行调整和扩展

封装 HTTP 请求库: 可以使用现有的 HTTP 请求库（如 Axios、Fetch 等）进行封装，添加统一的请求拦截器和响应拦截器，处理公共逻辑（如添加 token、错误处理等）。
统一错误处理: 将网络请求的错误统一处理，可以根据不同的错误码或错误类型进行相应的处理，如提示用户、重新请求等。
封装请求函数: 将不同类型的请求（如 GET、POST、PUT、DELETE 等）封装成函数，方便调用和管理。
设置默认配置: 可以设置默认的请求配置，如基础 URL、超时时间、请求头等，减少重复代码。
Promise 封装: 将网络请求封装成 Promise，使得可以使用 async/await 或者 Promise 的链式调用来处理异步操作。

防抖、节流

在实际开发过程中，可以通过lodash库的debounce（防抖）和throttle（节流）来现实

防抖：只执行最后一次，如：根据输入框输入的内容，实时不断的从数据库或本地检索结果，由于输入内容在不断的变化，这个检索的结果也在不断的更新。但是本质上我们的内容还没有真正的输入完，所以需要等待一定的时间来判定我们的内容已经输入完毕。在这个时间的倒计时为0的这一段时间内，我们的内容发生变化，这个时间又重置为初始值，当初始值不为0时，不执行操作。
- 应用场景：搜索框实时搜索、文本编译器实时保存等
- 代码实现
```
let timerId = null
function fn () {
	if (timer1d !== null){
		clearTimeout(timerId)
	}
	timerId = setTimeout(() =>{
		consgle.log( ... )
	},1000)
}
```
节流：在设定的一段时间内只执行一次，如：我们通过不断点击按钮来请求数据，这样就会极大的耗费服务器资源，还会造成页面堵塞等。假设，这时我们设定时间为2s，在距离上一次执行的时间不到2s，那这个时间段内的请求我们在前端直接驳回，不让他执行。
- 应用场景
  - 高频事件：快速点击、鼠标滑动、resize事件（像素）、scroll事件（像素）等
  - 下拉加载、图片懒加载
  - 视频播放记录时间
- 代码实现
```
let timerId = null
function fn() {
	if (timerId !== null) return
	
	timerId = setTimeout(() =>{
		console.log( ... )
		timerId = null
	},100)
}
```

清除字符串前后的空格

trs.trim();  存在小部分不兼容

数组去重

let arr1 = [...new Set(arr)]

数组倒序

let arr1 = arr.reverse()

浏览器

回流和重绘

回流：浏览器为了重新渲染部分或整个页面而重新计算元素的位置和几何结构的过程。回流必定会引起重绘。
重绘：是指当元素的外观发生变化，但不影响布局的情况下，浏览器会重新绘制这些元素的过程。
如何避免：
- 减少对 DOM 的操作，合并多次修改样式或者属性的操作
- 使用 CSS 动画代替 JavaScript 操作样式
- 改变子元素样式尽可能不要影响父元素和兄弟元素的大小和尺寸

storage存储

sessionStorage：用于本地存储一个会话中的数据，这些数据同一会话中的页面才能访问，且会话结束后数据销毁。

localStorage：用于持久化的本地存储，除非主动删除数据，否则数据是永远存在。

浏览器渲染原理

解析HTML：浏览器从服务器接收HTML文档，然后解析成一个DOM（文档对象模型）树。
解析CSS：浏览器解析CSS样式，生成CSSOM（CSS对象模型）树。
合并DOM和CSSOM：浏览器将DOM和CSSOM合并成一个渲染树（Render Tree）。这个树只包含需要显示在页面上的节点和样式。
布局：浏览器根据渲染树中每个节点的样式信息，计算其在屏幕上的确切位置和大小。
绘制：浏览器遍历渲染树，将每个节点转换成屏幕上的实际像素。
合成与显示：浏览器将各层的像素信息发送给GPU，GPU将这些信息合成并显示在屏幕上。

跨域

跨域：请求url的协议、域名、端口任意一个与当前页面url不同
同源策略：浏览器不允许非同源的 URL 之间进行资源的交互，简称不允许跨域
解决方案：前端开发阶段可通过设置proxy反向代理，跨域一般由后端处理

V8 垃圾回收机制

V8 是 Google Chrome 浏览器使用的 JavaScript 引擎，它采用了垃圾回收机制来管理内存。V8 使用分代垃圾回收算法，将内存分为新生代和老生代两个区域，通过不同的策略对不同区域的对象进行垃圾回收。常见的垃圾回收算法包括标记清除、标记整理等。

Vue2和Vue3

Vue2和Vue3的区别

性能提升
- 重写虚拟DOM的实现
- 编译器优化：Vue 3 的编译器进行了优化，生成的代码更加紧凑和高效
- Tree-shaking 支持：Vue 3 提供了更好的 Tree-shaking 支持，可以更好地优化打包后的代码
Composition API
- Vue3新增 Composition 组合式API：允许开发者根据逻辑组织代码，而不是按照选项分散编写
- Vue2选项式API
TypeScript 支持
- 原生支持 TypeScript：Vue 3 对 TypeScript 的支持更加完善
响应式系统
- Proxy 替代 Object.defineProperty：Vue 3 使用 Proxy 替代了 Vue 2 中的 Object.defineProperty
Fragment
- Fragment 支持：Vue 3 支持了 Fragment，可以在模板中使用 <template> 标签来包裹多个根节点
更小的体积
- 体积优化：Vue 3 的体积相比 Vue 2 有所减小，打包后的代码更加精简
其他改进
- 新的生命周期钩子：Vue 3 新增了一些生命周期钩子，如 beforeUnmount
- 全局 API 的修改：一些全局 API 发生了修改，如 Vue.observable 替代了 Vue.set 和 Vue.delete