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 = 1function 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] = arrconsole.log(a)console.log(b)console.log(c)
</script>

支持多维度的解构赋值 

对象解构：

<script>const user = {name : 'cxr',age : 18};const {name, age} = userconsole.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 pinkconsole.log(index) // 索引号})
</script>

<script>const arr = [10, 20, 30]const newArr = arr.filter(item => item >= 20)console.log(newArr)
</script>

filter()方法会创建一个新的数组，新数组就是过滤条件过后的数组