一、HTML基础部分
1、什么是盒子模型？（重要）
在网页中，一个元素占有空间的大小由几个部分构成，其中包括元素的内容(content)，元素的内边距(padding)，元素的边框(border)，元素的外边距(margin)四个部分。这四个部分占有的空间中，有的部分可以显示相应的内容，而有的部分只用来分隔相邻的区域或区域。4个部分一起构成了css中元素的盒模型。
2、CSS实现垂直水平居中 （重要）
总结：内联元素和块级元素的水平居中方式
内联元素居中布局方式
①水平居中
行内元素可设置text-align：center
flex布局设置父元素：display:flex;justify-content:center
②垂直居中
单行文本父元素确定高度：height == line-height
多行文本父元素确定高度：display:table-cell;vertical-align:middle
块级元素居中布局方式
①水平居中
定宽：margin:0 auto
flex布局设置父元素：display:flex;justify-content:center
绝对定位+负值margin
绝对定位+transform:translateX(-50%)
table-cell布局设置父元素：display:table-cell;text-align:center
②垂直居中
flex布局设置父元素：display:flex;align:center
display布局设置父元素：display:tabel-cell;vertical-align:middle
position：absolute+负值margin
position:absolute+transform:translateY(-50%)
3、简述一下src与href的区别
href 是指向网络资源所在位置，建立和当前元素(锚点)或当前文档(链接)之间的链接，用于超链接。
src是指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置;在请求src资源时会将其指向的资源下载并应用到文档内，例如js脚本，img图片和frame等元素。当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。
4、简述同步和异步的区别
1、同步的概念应该是来自于操作系统中关于同步的概念。
2、不同进程为协同完成某项工作而在先后次序上调整(通过阻塞,唤醒等方式)。同步强调的是顺序性，谁先谁后；异步则不存在这种顺序性。
3、同步：浏览器访问服务器请求，用户看得到页面刷新，重新发请求,等请求完，页面刷新，新内容出现，用户看到新内容,进行下一步操作。
4、异步：浏览器访问服务器请求，用户正常操作，浏览器后端进行请求。等请求完，页面不刷新，新内容也会出现，用户看到新内容。
5、px和em的区别
px和em都是长度单位，区别是，px的值是固定的，指定是多少就是多少，计算比较容易。em得值不是固定的，并且em会继承父级元素的字体大小。
浏览器的默认字体高都是16px。所以未经调整的浏览器都符合: 1em=16px。那么12px=0.75em, 10px=0.625em
6、JavaScript部分怎样添加、移除、移动、复制、创建和查找节点？
1）创建新节点
* createDocumentFragment() //创建一个 DOM 片段
* createElement() //创建一个具体的元素
* createTextNode() //创建一个文本节点
2）添加、移除、替换、插入
* appendChild() //添加
* removeChild() //移除
* replaceChild() //替换
* insertBefore() //插入
3）查找
* getElementsByTagName() //通过标签名称
* getElementsByName() //通过元素的 Name 属性的值
* getElementById() //通过元素 Id，唯一性
7、JS有哪些数据类型
基本数据类型(值类型)：字符串（String）、数字(Number)、布尔(Boolean)、对空（Null）、未定义（Undefined）。
引用数据类型（对象类型）：对象(Object)、数组(Array)、函数(Function)。
特殊的对象：正则（RegExp）和日期（Date）。
特殊类型：underfined 未定义、Null 空对象、Infinate 无穷、NAN 非数字
8、什么是深拷贝，怎么实现深拷贝
https://www.jb51.net/article/229259.htm
浅拷贝只会发生在引用类型身上，对于引用类型如果之进行简单的赋值，只会赋值指向堆内存的指针，这种称为浅拷贝。而深拷贝就是完全拷贝一个引用类型，为不是地址指针。
实现深拷贝的方式：
Object.assign
JSON.parse(JSON.stringify( ))
9、如何消除一个数组里面重复的元素？
1.ES6的Set类数组去重
var arr = [1,2,2,3,3,4,4,1,5,6,6,5] function unique (arr) { return Array.from(new Set(arr)) } console.log(unique(arr)) //[1,2,3,4,5,6]
ES6的Set是类数组，里面的值是唯一的，但是不是真正的数组所以要通过Array.from()方法转化为数组，不考虑兼容问题是最简单的去重方法
2.for循环嵌套for循环
var arr = [1,2,2,3,3,4,4,1,5,6,6,5]; function unique(arr) { for (var i = 0; i < arr.length; i++) { // 首次遍历数组 for (var j = i + 1; j < arr.length; j++) { // 再次遍历数组 if (arr[i] == arr[j]) { // 判断连个值是否相等 arr.splice(j, 1); // 相等删除后者 j--; } } } return arr } console.log(unique(arr));
两个for循环加上spliceES5常用的方法
第一个for遍历每个数组项，第二个for循环遍历第一个for循环当前遍历项后面的数组项与第一个for当前数组项作比较，后面存在相等的项，则删除掉此项，并且j要减一，因为删除了一项，所以后面的元素往前移了，所以减一来抵消迁移确保每一项遍历完
3.indexOf去重
var arr = [1,2,2,3,3,4,4,1,5,6,6,5]; function unique(arr) { if (!Array.isArray(arr)) { console.log('错误！') return } var array = []; for (var i = 0; i < arr.length; i++) { // 首次遍历数组 if (array.indexOf(arr[i]) === -1) { // 判断索引有没有等于 array.push(arr[i]) } } return array } console.log(unique(arr));
indexOf()会判断数组里面是否含有这个值，没有则返回-1，有则返回存在的数组下标值，有多个只返回第一个，不再继续判断
for循环加indexOf，for循环存在newArr里则什么都不做，不存在则加入新数组里，返回新数组
4.利用filter
var arr = [1,2,2,3,3,4,4,1,5,6,6,5]; function unique(arr) { return arr.filter( (item, index, arr) => { //当前元素，在原始数组中的第一个索引==当前索引值，否则返回当前元素 return arr.indexOf(item) === index; }); } console.log(unique(arr));
filter加indexOf，判断当前的索引值等不等于indexOf返回的索引值，等于就是同一个数组项，不等于的情况就是当前的item是第二次出现，而indexOf判断出来的下标值还是第一个，这一项则不会返回，所以达到了去重的要求
10、请描述一下cookies，sessionStorage和localStorage的区别?
1、cookie在浏览器与服务器之间来回传递
sessionStorage 和 localStorage 不会把数据发给服务器，仅在本地保存
2、数据有效期不同
cookie 只在设置的 cookie 过期时间之前一直有效，即使窗口或浏览器关闭
sessionStorage：仅在当前浏览器窗口关闭前有效
localStorage： 始终有效，长期保存
3、cookie 数据还有路径的概念，可以限制 cookie 只属于某个路径下
存储大小也不同，cookie 数据不能超过4k，sessionStorage 和localStorage 虽然也有存储大小的限制，但比 cookie 大得多，可以达到5M或更大
4、作用域不用
sessionStorage：不在不同的浏览器窗口中共享
localStorage：在所有同源窗口中都是共享的
cookie：也是在所有同源窗口中都是共享的
Storage：支持事件通知机制，可以将数据更新的通知发送给监听者。
11、css如何清除浮动
第一种 clear:both
取值：
1、none
默认值，不做任何清除浮动的操作
2、left
清除前面元素左浮动带来的影响
3、right
清除前面元素右浮动带来的影响
4、both
清除前面元素所有浮动带来的影响
优势：代码量少 容易掌握 简单易懂
第二种 额外标签法
额外标签法（在最后一个浮动标签后，新加一个标签，给其设置clear：both；）
第三种父元素添加overflow:hidden 或 auto
第四种 父元素添加：after伪类清除浮动
第五种父元素添加display: table;
参考答案常用的一般为三种.clearfix, clear:both,overflow:hidden;
比较好是 .clearfix,伪元素万金油版本,后两者有局限性.
.clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0;}.clearfix:before, .clearfix:after { content:""; display:table;}.clearfix:after{ clear:both; overflow:hidden;}.clearfix{ zoom:1;}clear:both:若是用在同一个容器内相邻元素上,那是贼好的,有时候在容器外就有些问题了, 比如相邻容器的包裹层元素塌陷
overflow:hidden:这种若是用在同个容器内,可以形成 BFC避免浮动造成的元素塌陷
12、display: block;和display: inline;的区别
参考答案block元素特点：
1.处于常规流中时，如果width没有设置，会自动填充满父容器 2.可以应用margin/padding 3.在没有设置高度的情况下会扩展高度以包含常规流中的子元素 4.处于常规流中时布局时在前后元素位置之间（独占一个水平空间） 5.忽略vertical-align
inline元素特点
1.水平方向上根据direction依次布局
2.不会在元素前后进行换行
3.受white-space控制
4.margin/padding在竖直方向上无效，水平方向上有效
5.width/height属性对非替换行内元素无效，宽度由元素内容决定
6.非替换行内元素的行框高由line-height确定，替换行内元素的行框高由height,margin,padding,border决定 7.浮动或绝对定位时会转换为block8.vertical-align属性生效
13、谈谈定位
static: 正常⽂档流定位，此时 top, right, bottom, left 和 z-index 属性⽆效，块级元素从上往下纵向排布，⾏级元素从左向右排列。
relative：相对定位，此时的『相对』是相对于正常⽂档流的位置。
absolute：相对于最近的⾮ static 定位祖先元素的偏移，来确定元素位置，⽐如⼀个绝对定位元素它的⽗级、和祖⽗级元素都为relative，它会相对他的⽗级⽽产⽣偏移。
fixed：指定元素相对于屏幕视⼝（viewport）的位置来指定元素位置。元素的位置在屏幕滚动时不会改变，⽐如那种回到顶部的按钮⼀般都是⽤此定位⽅式。
sticky：粘性定位，特性近似于relative和fixed的合体，其在实际应⽤中的近似效果就是IOS通讯录滚动的时候的『顶屁股』。
14、CSS 如何计算优先级？
就近原则，同权重情况下以样式定义最近者为准；
载入样式以最后载入的定位为准；
优先级：
!important > id > class > tag
important 比 内联优先级高
设置元素浮动后，该元素的 display 值是多少？（自动变成display:block）
CSS 选择符有哪些？哪些属性可以继承？优先级算法如何计算？ CSS3新增伪类有那些？
id选择器（ # myid）
类选择器（.myclassname）
标签选择器（div, h1, p）
相邻选择器（h1 + p）
子选择器（ul > li）
后代选择器（li a）
通配符选择器（ * ）
属性选择器（a[rel = “external”]）
伪类选择器（a: hover, li: nth – child）
可继承的样式： font-size font-family color, UL LI DL DD DT;
不可继承的样式：border padding margin width height ;
优先级就近原则，同权重情况下样式定义最近者为准;
15、HTML5有哪些新特性,移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分HTML和HTML5
新增加了图像、位置、存储、多任务等功能。
新增元素：
canvas
用于媒介回放的video和audio元素
本地离线存储。localStorage长期存储数据，浏览器关闭后数据不丢失;sessionStorage的数据在浏览器关闭后自动删除
语意化更好的内容元素，比如 article footer header nav section
位置API：Geolocation
表单控件，calendar date time email url search
新的技术：web worker(web worker是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。您可以继续做任何愿意做的事情：点击、选取内容等等，而此时 web worker 在后台运行) web socket
拖放API：drag、drop
移除的元素：
纯表现的元素：basefont big center font s strike tt u
性能较差元素：frame frameset noframes
区分：
DOCTYPE声明的方式是区分重要因素
根据新增加的结构、功能来区分
16、元素的alt和title有什么异同？
在alt和title同时设置的时候，alt作为图片的替代文字出现，title是图片的解释文字。
17、什么是文档流
文档流可以分为，普通流和脱离文档流
普通流：也可称为常规流、文档流。是文档中可显示对象在排列时所占的位置
脱离文档流：元素浮动在文档流之上
以上是定义，以下是理解：
所谓文档流，可以理解为是元素的位置，比如，relative定位的元素就处于文档流。此时，通过left、top、bottom、right四个属性可以规定元素的位置，但元素出现在你所规定的位置之后，它原来的位置依旧保留，其他元素不能占用。而用absolute、fixed定位的元素，就脱离了文档流，也就是说，自己规定了元素的位置之后，元素的原位置不保留了，可以理解为元素发生了一个简单地“平移”。注意，浮动元素也会脱离文档流
18、绝对定位相对定位有什么区别
relative：
1、relative：相对于原来位置移动，元素设置此属性之后仍然处在文档流中，不影响其他元素的布局
absolute：
1、在父元素没有设置相对定位或绝对定位的情况下，元素相对于根元素定位
2、父元素设置了相对定位或绝对定位，元素会相对于离自己最近的设置了相对或绝对定位的父元素进行定位
（或者说离自己最近的不是static的父元素进行定位，因为元素默认是static）。
- absolute:元素会脱离文档流，如果设置偏移量，会影响其他元素的位置定位。
简单的讲如果设置了相对位置，那么绝对位置会根据最近的相对位置进行定位（某种程度上来说相对位置就像锚点，而绝对位置就是锚，但是这个锚点不能脱离文档流就是不能脱离大海。）
19、JS 中 == 和 === 区别是什么？
1、对于string,number等基础类型，==和===有区别
1）不同类型间比较，==之比较“转化成同一类型后的值”看“值”是否相等，===如果类型不同，其结果就是不等。
2）同类型比较，直接进行“值”比较，两者结果一样。
2、对于Array,Object等高级类型，==和===没有区别
进行“指针地址”比较。
3、基础类型与高级类型，==和===有区别
1）对于==，将高级转化为基础类型，进行“值”比较。
2）因为类型不同，===结果为false。
20、JS中的匿名函数是什么？
匿名函数：就是没有函数名的函数，如：
(function(x, y){
alert(x + y);
})(2, 3);
这里创建了一个匿名函数(在第一个括号内)，第二个括号用于调用该匿名函数，并传入参数。
21、如何在JS中动态添加/删除对象的属性？
咱们可以使用object.property_name = value向对象添加属性，delete object.property_name 用于删除属性。
例如：
let user = new Object();
// adding a property
user.name='Anil';
user.age =25;
console.log(user);
delete user.age;
console.log(user);
22、解释 JS 事件委托模型？
在JS中，有一些很酷的东西。其中之一是委托模型。当捕获和冒泡时，允许函数在一个特定的时间实现一个处理程序到多个元素，这称为事件委托。事件委托允许将事件侦听器添加到父节点而不是指定的节点。这个特定的侦听器分析冒泡事件，以找到子元素上的匹配项。
23、JS中如何将页面重定向到另一个页面？
24、什么是闭包
当我第一次解释闭包时，我常说函数中的函数;但是，它没有正确地描述闭包的确切含义。
闭包是在另一个作用域内创建一个封闭的词法范围。它通常会自动返回来生成这个词法环境。这个环境由创建闭包时在作用域内的任何局部变量组成。它就像一个微型工厂，用这些原料生产出具有特定功能的产品。
function add(n){ var num = n return function addTo(x){ return x + num } } addTwo = add(2) addTwo(5)
闭包的另一个应用是创建私有变量和方法。JavaScript不像Java那样可以很好地支持oop。在JS中没有明确的方法来创建私有方法，但是闭包可以私有方法。
25、解释一下变量的提升
变量的提升是JavaScript的默认行为，这意味着将所有变量声明移动到当前作用域的顶部，并且可以在声明之前使用变量。初始化不会被提升，提升仅作用于变量的声明。
var x = 1
console.log(x + '——' + y) // 1——undefined
var y = 2
26、原型和原型链是什么？
javascript原型与原型链
每个函数都有一个prototype属性，被称为显示原型
每个实例对象都会有_ _proto_ _属性,其被称为隐式原型
每一个实例对象的隐式原型_ _proto_ _属性指向自身构造函数的显式原型prototype
每个prototype原型都有一个constructor（看次chua克特）属性，指向它关联的构造函数。
原型链
获取对象属性时，如果对象本身没有这个属性，那就会去他的原型__proto__上去找，如果还查不到，就去找原型的原型，一直找到最顶层(Object.prototype)为止。Object.prototype对象也有__proto__属性值为null。
