Document

1.css引入方式，优先级
内嵌式 外链式 行内式 行内式 > 外链式和内嵌式谁放在后面
2.设置颜色
英文单词 色号 rgb
3.选择器（十几种），基本选择器的优先级
标记选择器，类别选择器，id选择器，并集选择器tagName.class{}，交集选择器sel1,sel2,sel3,selN，后代选择器，子辈选择器，紧邻兄弟选择器，兄弟选择器，全选选择器，伪类选择器
4.块元素和行内元素，及其转化
块元素：是页面中的主要组成部分,元素自带换行,从上往下排列,元素设置盒子模型参数有效,设置内部对齐方式有效，
行内元素：元素在页面中大多进行信息提示或者收集,结尾没有换行,一行可以书写多个,从左往右排列,设置盒子模型无效,设置内部对齐方式无效
display:block; 设置元素为块元素
display:inline; 设置元素为行内元素
5.元素的四种隐藏
1）display:none; 隐藏自己，隐藏后原位置不保留
2）visibility:hidden; 隐藏自己，隐藏后原位置保留
3）opacity:0; 隐藏自己，隐藏后原位置保留
4）overflow:hidden; 溢出部分隐藏
6.设置整体居中的三种方式
1、设置像素 （无法实现可响应式）
2、设置百分比（使用高度百分比必须设置参照物）
3、使用视口宽度和高度（vw,vh）
7.标准文本流与盒子模型
标准文本流：由于页面中的主要组成部分是块元素,块元素自带换行,因此,一般情况下页面中所有的元素都自上而下排列,类似水流一样,如果我们通过各种手 段将某个元素挪走则下面的元素递补,继续维持这种类似水流的自上而下的状态这种默认的状态称之为标准文本流。
盒子：每个元素都被看做一个一个矩形的盒子,这个盒子与外界其他盒子的距离称之为外边距，margin,存在四个方向,盒子与内部套的内容之间的距离称之为 内边距padding,存在四个方向,同时盒子存在四个边框 border,存在四个方向,盒子内部嵌套的内容存在 宽度 width 和高度 height,最终共有 14 个参数,这 14个参数被称之为盒子模型参数,内联元素多数无效块元素全部有效。
8.改变元素标准文本流排列方式的途径，浮动，定位，弹性盒子，弹性盒子的各种。
浮动：元素设置浮动之后,向浮动方向不断缩小,缩小到内部嵌套的内容位置,之后漂浮在页面中,后续的元素会递补浮动元素原先的位置,如果多个元素同时浮动 ,则原先的从上往下的顺序被打破,变为从左到右或者从右到左排列,与弹性盒子冲突,无法使用在弹性容器中
相对定位:元素根据其原先所在位置的左上角进行定位,偏移量top left bottom right,元素依然保持原先的类型,定位之后原先的位置依然被占用.
绝对定位:与距离最近的定位过的祖先元素的左上角进行定位,定位之后元素不再保持原先的类型,而是宽和高根据其内部的内容为准,原来的位置不再被保留.
弹性盒子是 CSS3 的一种新的布局模式，是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式，目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和空白空间的分配
采⽤ Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有⼦元素⾃动成为容器成员，称为 Flex 项⽬（flex item），简称"项⽬"。
容器默认存在两根轴：⽔平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边 框的交叉点）叫做 main start ，结束位置叫做 main end ；交叉轴的开始位置叫做 cross start ，结束位置叫做 cross end 。 项⽬默认沿主轴排列。单个项⽬占据的主轴空间叫做 main size ，占据的交叉轴空间叫做 cross size 。
display: flex;
justify-content: center;
align-items: center;

9.相对定位与绝对定位

10.flex:1;
完全版书写格式为flex:flex-grow flex-shrink flex-basis;
11.get与post
get
速度快,安全性几乎没有,通过浏览器地址栏进行传递,格式为?key=value&key2=value2&keyN=valueN,最多传递 2000 个字符,不支持中文,链接默认就是使用的 get,而表单可以进行设置
post
速度慢,安全性高,通过发送请求的载荷传递数据,没有大小限制,支持中文,上传操作必须使用 post,链接无法使用 post

12.js三大模块
ES规范 BOM DOM
13.ES规范基本数据类型（7个）与复杂数据类型（6个）
基本数据类型:string numder boolean null undefined bigint symbol
复杂数据类型：Object Function Array RegExp Date Math
14.BOM对象（7个）
window location navigator screen frame document histroy
15.Dom: 文档对象模型（5个）
文档节点 元素节点 属性节点 文本节点 注释节点
16.js能够直接修改页面的结构和样式嘛?如果不能请说出为什么?
不能，js只能通过DOM间接修改页面的结果和样式，浏览器从上往下解析用户书写的页面,如果没有任何问题,则在解析完之后,创建一个 DOM 文档对象模型,这个模型保存在内存中,结构样式与页面完全一致,由各种节点组成，使用 BOM 中的 document 内置对象通过选择器可以对这个 DOM 模型进行增删查改操作,修改之后,如果浏览器发现模型与页面不再保持一致,则浏览器重新渲染页面,之前一致的内容继续复用,不一致的内容重新渲染,最终页面与 DOM 模型再次保持一致。所以 js 其实是通过 DOM 间接修改了页面的结构和样式
17.var为什么被取代了？
无视块级作用域,可以重复赋值,可以先使用再声明
18.js选择器
Node document.querySelector(‘sel’)直接可以使用各种css选择器获取唯一一个元素节点
NodeList document.querySelectorAll(‘sel’)直接可以使用各种 css 选择器获取唯多个元素节点
19.常用字符串函数
str.length str.replace(‘e’,‘a’) str.indexOf(‘w’) str.lastIndexOf(‘w’)
str.charAt(5) str.substring(x,y) str.substr(x,length) let knife = str.split(‘.’)
substring 和 substr 和 slice的区别
substring(index0,index1)会将小的参数作为开始位置，大的作为结束位置
substr(startIndex, length),第一个参数指定字符串的开始位置，第二个参数要返回的字符个数
slice（startIndex,endIndex) 第一个参数指定字符串的开始位置，第二个参数指定字符串的结束位置
19.数组
构造数组
(1)通过构造器构造一个数组
(2)直接创建数组
数组的操作
push():尾部追加
unshift():头部追加
shift():头部删除
pop():尾部删除
sort():正序排列
reverse():逆序排列
splice():根据索引删除 格式：splice(index,length,replace)
以上七个函数是最常见对数组进行增删查改操作的函数,会更改原数组
以下三个函数会对数组进行过滤操作,不会影响原数组会生成新的数组
filter():根据所填写的表达式,只要表达式为 true,则返回数据,不为 true 则不返回,最终返回的数据组成一个新的数组.
find():与 filter()类似,但是仅仅返回第一个符合表达式的数据.
map():一般不书写表达式,多使用在对象中,如果在 map 中书写表达式则符合表达式返回 true,不符合返回 false.
indexOf():查询所填数据在数组中的索引值,如果查询失败则返回-1
数组的遍历
(1)ES5 for in 迭代
for(let index in 循环体){
}
(2)ES6 for of 迭代
for(alias of 循环体){
}
(3)ES6 forEach 迭代
循环体.forEach(function(alias,index){
参数为回调函数
})
20.filter 和find
const arr1 = arr.filter(a => a>= 35) 返回一个数组
let count = arr.find (a => a>=35) 返回第一个符合表达式的数据

21.const:
对于基本数据类型,const 用来赋值常量数据在赋值之后不能再有所变动,否则报错
对于复杂类型,const 赋值之后划分了内存地址当数据更改,不会再去内存中进行寻址,而是从固定的
内存地址中进行变动,不会引起频繁的寻址,相较 let需要重新划分内存地址节省资源,因此复杂类型推荐使用
const,不影响数据的变动
22.对象
构造对象
(1).直接使用对象字面量创建对象
(2).使用构造器构造对象
对象的操作
(1)获取属性值
ES5
属性值 = 对象名.属性名
ES6
属性值 = 对象名[‘属性名’]
(2)设置属性值
对象名.属姓名 = 新的属性值
(3)调用方法
对象名.方法名()
(4)获取所有对象的属性名
Object.keys(对象)
(5)获取对象的所有属性值
Object.values(对象)
(6)删除属性,注意删除成功返回 true 失败 false
console.log(delete person.age)
22.js中的this
如果书写在对象中,则表示本对象,这里就表示 person
如果书写在全局作用域,则 this 就是全局变量 window
23.ES6的新特性
let 和const代替var，箭头函数，解构赋值，分离语法、模板字符串
通过css选择器获取元素节点，如果属性名和属性值相同则仅写属性名 (ASI新特性)
for of、forEach、对象里面的方法直接缩略写法、
24. 请写出什么是深拷贝什么是浅拷贝?请写出 等号 分离运算符 都是什么拷贝方式?
浅拷贝:两个拷贝后的数据不管哪一个修改,都会影响另一个,既你变我也变,称之为浅拷贝
深拷贝:两个拷贝后的数据不管哪一个修改,都不会影响另一个,既你变我不变,称之为深拷贝
1:使用 =
基本类型:肯定是深拷贝
复杂类型:肯定是浅拷贝
2:使用 …
复杂类型:拷贝之后,如果修改的数据是这个复杂类型表层的数据,这个数据是基本类型,则深拷贝
拷贝之后,如果修改的数据是这个复杂类型表层的数据,这个数据是复杂类型,则浅拷贝

margin边界碰撞
margin-top问题
父元素设置overflow:hidden;
父元素或者子元素设置float
父元素设置border:1px solid transparent;
父元素设置padding-top:1px;