1.标准流
指的是标签在页面中默认的排布规则，例如块元素独占一行，行内元素可以一行显示多个。
2.Flex布局
也称弹性布局，是浏览器提倡的布局模型，适合结构化布局，并且不会产生浮动布局中脱标的现象。
浮动布局：浮动布局主要用于解决多个块元素共存于一行的问题。虽然浮动可以解决多个块元素共存一行的问题，但是也会有非常不好的影响。
例如：浮动布局需要编程者自己计算同一行块元素的外边距，而Flex布局只需要设置好属性就自动帮编程者计算，并排布好同一行的块元素。
设置方式：给父元素display：flex，子元素可以自动挤压或者拉伸
组成部分：
* 弹性容器
* 弹性盒子
* 主轴：默认在水平方向
* 侧轴：默认在垂直方向
主轴对齐方式：justify-content
侧轴对齐方式：align-items：弹性容器内所有弹性盒子侧轴对齐。align-self：单独某个弹性盒子侧轴对齐
---JS
3.JS引入方式
JS程序不可以独立运行，它需要嵌入到HTML中，交给浏览器执行。通过<script>标签引入JavaScript代码到HTML中。
一般都是将JS代码独立写到.js文件中，通过script标签的src属性来引入
4.变量是计算机中用来存储数据的“容器”
5.JS中用let和var声明变量，const声明常量
6.DOM
DOM是将整个HTML文档的每一个标签元素视为一个对象，每个对象都包含了许多属性和方法，通过操作这些属性和方法对HTML进行动态的更新，以此实现网页特效以及和用户的交互
简而言之，DOM就是用来动态修改HTML，目的就是开发网页特效和与用户交互。
document就是JS内置的用于操作DOM的对象，document有若干属性和方法。（例如document.querySelector抓取页面标签）
7.innerHTML，innerText修改标签内文本内容
8.自定义属性
HTML5推出自定义属性----语法：data-自定义属性，DOM对象采用dataset方式来获取
9.间歇函数，setInterval，也称之为定时器函数
10.事件监听
程序的行为和状态用 事件 来描述
结合DOM对象来使用事件，则为DOM对象添加事件监听，等待事件发生的时候，便调用一个函数
方法：addEventListener
其实无非就是找个机会触发一个函数。
<script>
button.addEventListener('click', function(){
console('事件触发')
const text = document.querySelector('.text')
text.style.color = 'red'
})
</script>11.事件类型
鼠标事件
mouseenter鼠标移入，mouseleave鼠标移出
键盘事件
keydown键盘按下，keyup键盘抬起
表单事件
input输入
焦点事件
focus获得焦点，blur失去焦点
12.事件对象
任何事件类型被触发的时候，于事件相关的信息会用对象的形式记录下来，找个对象就称之为事件对象。
事件监听中第二个参数（回调函数）的第一个参数就是事件对象
<script>
const box = document.querySelector('.box')
box.addEventListener('click', function(e){
// e就是事件对象
console.log(e)
})
</script>13.this
谁调用，this就指代谁，粗略规则
14.如果将A函数作为B函数的参数，那么就称A为回调函数
回调函数一般都是匿名函数的形式
15.事件流
事件流就是时间的执行过程
事件的执行顺序：捕获、冒泡
捕获阶段：从父到子元素
冒泡阶段：从子到父元素
当某个元素的事件被触发的时候，事件总是会先经过它的祖先才能到达当前元素，然后再由当前元素向它的祖先传递，事件在这个流动过程中遇到相同的事件就会被全部触发。
事件的执行顺序也是可以控制的，既可以再捕获阶段执行，也可以在冒泡阶段执行
冒泡模式：先执行子盒子事件再向上执行父盒子事件
捕获模式：先执行父盒子事件再向下执行子盒子事件
归纳：
1.addEventLisenter第三个参数可以设置事件在捕获还是冒泡阶段触发，true表示捕获，false表示冒泡，默认false
2.事件流只会在父子元素具有相同的事件类型时才会产生影响
3.绝大多数时候都是冒泡模式
4.阻止冒泡：就是中断事件的流动，保证事件只在当前元素被执行，而不再去影响它的祖先元素。（用事件对象的方法：e.stopPropagation()）
16.localStorage
作用：数据可以长期保留在本地浏览器中，刷新页面和关闭页面都不会丢失
特点：键值对的形式，存储形式是字符串
17.数组方法
map方法：
遍历数组并处理数据，并返回新的数组
join方法：
把数组中的所有元素转换为一个字符串。
18.闭包
<script>
// 闭包的写法实例
function outer(){
let count = 1
function fun() {
count ++;
console.log('内部函数访问了外部函数的count变量')
}
return fun;
}
const res = outer()
</script>总结：
1.如何理解闭包？
闭包 = 内层函数 + 外层函数的变量
2.闭包的作用？
封闭数据，实现数据的私有化，外部也可以访问函数内部的变量
闭包很有用，因为它允许将函数与其所操作的某些数据（环境）关联起来
3.闭包可能引起的问题？
内存泄漏
19.arguments
arguments是函数内部内置的伪数组变量，它包含了调用函数时传入的所有实参
arguments是一个伪数组，它的作用是动态获取函数的实参
20.箭头函数
箭头函数就是一个声明函数的其他写法，更加简洁
<script>
//1.箭头函数基本语法
const fn = () => {
console.log(123)
}
fn()
const fn = (x) => {
console.log(x)
}
fn(1)
//2.只有一个形参的时候，可以省略小括号
const fn = x => {
console.log(x)
}
fn(1)
//3.只有一行代码的时候，可以省略大括号
const fn = x => console.log(x)
//4.只有一行代码的时候，可以省略return
const fn = x => x + x
console.log(fn(1))
//5.箭头函数可以直接返回一个对象
const fn = (uname) => ({uname : uname})
console.log(fn('cxr'))
</script>
箭头函数中没有arguments，只能用...来动态获取实参
21.解构赋值
本质就是快速为变量赋值的简洁语法，分为数组和对象解构
数组解构：
<script>
let arr = [1, 2, 3]
let [a, b, c] = arr
console.log(a)
console.log(b)
console.log(c)
</script>支持多维度的解构赋值
对象解构：
<script>
const user = {
name : 'cxr',
age : 18
};
const {name, age} = user
console.log(name)
console.log(age)
</script>同样也支持多维解构赋值
22.foreach和filter操作数组
<script>
const arr = ['red', 'green', 'pink']
const result = arr.forEach(function(item, index) {
console.log(item) // 数组元素 red green pink
console.log(index) // 索引号
})
</script><script>
const arr = [10, 20, 30]
const newArr = arr.filter(item => item >= 20)
console.log(newArr)
</script>filter()方法会创建一个新的数组，新数组就是过滤条件过后的数组