作用：实现数据私有
内层函数, 引用外层函数上的变量, 就可以形成闭包。
function count() {
let num = 0 //只能在count函数中访问到
function add() {
num++
console.log(num)
}
//执行count函数会返回add函数，相当于外面可以执行add函数，且不能直接访问修改num
return add
}
//addFN等价于返回的add函数
let addFN = count()
addFN() //1
function sum(x) {
return function (y) {
return console.log(x + y)
}
}
//此时传值给sum函数的x
let fn = sum(3)
//此时传值给内部匿名函数的y
fn(10)
// 控制台结果为13
JavaScript 语言的一大特点就是单线程，也就是说，同一个时间只能做一件事.
单线程就意味着，所有任务需要排队，前一个任务结束，才会执行后一个任务.
这样所导致的问题是: 如果 JS 执行的时间过长，这样就会造成页面的渲染不连贯，导致页面渲染加载阻塞的感觉.
利用多核 CPU 的计算能力，HTML5 提出 Web Worker 标准，允许 JavaScript 脚本创建多个线程.
于是，JS 中出现了同步和异步.
前一个任务结束后再执行后一个任务，程序的执行顺序与任务的排列顺序是一致的、同步的。
在做一件事的同时，还可以去处理其他事情.
同步任务都在主线程上执行，形成一个执行栈
JS 的异步是通过回调函数实现的
一般而言，异步任务有以下三种类型:
异步任务相关回调函数添加到任务队列中（任务队列也称为消息队列）
异步JavaScript
https://developer.mozilla.org/zh-CN/docs/Learn/JavaScript/Asynchronous/Introducing
通用异步编程概念
https://developer.mozilla.org/zh-CN/docs/conflicting/Learn/JavaScript/Asynchronous/Introducing
执行栈中的同步任务执行栈中的所有同步任务执行完毕，系统就会按次序读取任务队列中的异步任务，于是被读取的异步任务结束等待状态，进入执行栈，开始执行主线程不断的重复获得任务、执行任务、再获取任务、再执行，这种机制被称为事件循环Event Loop
一、前言
三角形实现原理：
border-方向：长度 solid red，这个画的就是底部的直线。其他边使用border-方向：长度 solid transparent。二、实现
#triangle-up {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
}#triangle-down {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid red;
}#triangle-left {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-right: 100px solid red;
border-bottom: 50px solid transparent;
}#triangle-right {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-left: 100px solid red;
border-bottom: 50px solid transparent;
}#triangle-topleft {
width: 0;
height: 0;
border-top: 100px solid red;
border-right: 100px solid transparent;
}#triangle-topright {
width: 0;
height: 0;
border-top: 100px solid red;
border-left: 100px solid transparent;
}#triangle-bottomleft {
width: 0;
height: 0;
border-bottom: 100px solid red;
border-right: 100px solid transparent;
}#triangle-bottomright {
width: 0;
height: 0;
border-bottom: 100px solid red;
border-left: 100px solid transparent;
}场景:垂直布局的块级元素，上下的margin会合并
结果:最终两者距离为margin的最大值
解决方法:避免就好
• 只给其中一个盒子设置margin即可
场景:互相嵌套的块级元素，子元素的 margin-top 会作用在父元素上
结果:导致父元素一起往下移动
解决方法:
场景:给行内元素设置margin和padding时
结果:
方法：
缺点:会在页面中添加额外的标签，会让页面的HTML结构变得复杂
基本写法：
.clearfix::after{
content:'';
display:block
clear:both
}补充写法：
.clearfix::after{
content:'';
clear:both
/* 补充代码：在网页中看不到伪元素 */
height:0;
visibility:hidden;
}优点:项目中使用，直接给标签加类即可清除浮动
.clearfix::before,
.clearfix::after{
content:'';
display:table;
}
.clearfix::after{
clear:both;
}优点：项目中使用，直接给标签加类即可清除浮动
(拓展补充)
➢ 块格式化上下文(Block Formatting Context):BFC
是Web页面的可视CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。
➢ 创建BFC方法:
➢ BFC盒子常见特点: