前言：
js的知识点如果不整理的话就会复杂和难以理解，在对js阶段性的学习中，通过对js的知识点细节的整体梳理，和对其整体的主要问题进行总结概况，就会好记忆很多。（css的知识点是主要依靠记忆知识点，只是简述关键性问题）
整理的问题：
1.简述css盒子模型
CSS盒子模型分为：
内容(W3C标准盒子)content-box模型和边框盒子(IE盒子)border-box模型。
盒子模型是由内容区、padding（内边距）区、border（边框）区、margin（外边距）区组成。
盒子模型相互转换使用box-sizing属性，默认设置为content-box。
content-box（W3C盒子）:即设置的宽高是内容区的宽高。
内容区的宽：width 内容区的高：height
盒子的宽度=width+padding（padding-left+padding-right）+border（border-left+border-right）
盒子的高度=height+padding（padding-top+padding-bottom）+border（border-top+border-bottom）
盒子在浏览器中的宽度=width+padding（padding-left+padding-right）+border（border-left+border-right）+magin（margin-left+margin-right）
盒子在浏览器中的高度=height+padding（padding-top+padding-bottom）+border（border-top+border-bottom）+magin（margin-top+margin-bottom）
border-box（IE盒子）:即设置的宽高是盒子的宽高。
盒子的宽：width 盒子的高：height
内容区的宽度=width-padding（padding-left-padding-right）-border（border-left-border-right）
内容区的高度=height-padding（padding-top-padding-bottom）-border（border-top-border-bottom）
盒子在浏览器中的宽度=width+margin（margin-left+margin-right ）
盒子在浏览器中的高度=height+margin（margin-top+margin-bottom）
2.css选择器的优先级及计算方式
选择器优先级：
1）是否具有!important声明 ！important优先级最高
2）选择器权重
1000 定义在标签style属性中的行内样式
100 id选择器
10 类选择器，伪类选择器，属性选择器
1 元素（标签）选择器,伪元素选择器
3）选择器权重相同时，后者覆盖前者（就近原则，哪一个样式离标签近，哪一个就生效）
优先级顺序：
!important > id选择器 > 类选择器=伪类选择器=属性选择器 > 元素选择器=伪元素选择器
计算方式：将所有选择器的特性值相加，最终计算出整个CSS选择器的特性值。如果css属性有!important修饰，则优先级最高。如果特性值一样，则根据就近原则进行计算。
3.简述css3布局机制
1）浮动布局
可设置为:
float：right/left;左浮动和右浮动
特性：脱离文档流 不占据屏幕空间
但是不脱离文本流
不对文本元素做遮挡
块级元素能够在一行显示
行内元素可以设置宽高
停止浮动：
遇到其他浮动元素的时候 停止浮动
遇到父元素边框 停止浮动
<style type="text/css">
.one{
width: 100px;
height: 100px;
background-color: pink;
/* 对文本元素不进行遮挡 */
float: left;
}
.two{
/* width: 100px;
height: 100px;
background-color: teal; */
margin: 0 auto;
}
</style>
如图为浮动前的样式，块级元素独占一行，不对文本元素做遮挡 。
浮动后的样式为块级元素在一行显示。
清除浮动的方法补充：
1.清除兄弟级元素 clear
left
right
both
2.父子级
a.给父元素添加overfloat：hidden;
b.div::after{
content:’’;
clear:both;
}
2）定位布局
使用position：static/relative/fixed/absolute设置。
（1）静态布局 position：static
默认定位方式，不脱离文档流 不可以使用top left right bottom
（2）相对定位 position：relative
不脱离文档流 根据自己的本身的位置来定位 可以使用top left right bottom
（3）绝对定位 position：absolute
脱离文档流 如果父元素没有定位属性，根据浏览器左上角进行定位
如果父元素有定位属性，根据父元素进行定位
使用top left right bottom
图为未添加样式的两个div块：
（4）固定定位 position：fixed
既脱离文档流，也脱离文本流
对文本元素进行遮挡
相对于浏览器进行定位 不会随着页面的滚动而滚动
使用top left right bottom
设置属性z-index： 最大值2147483647 最小值 ：-2147483648
值越大显示越靠上
要有定位属性才可以
如果元素脱离了文档流，那么margin：0 auto；就失效了
<style type="text/css">
*{
padding: 0px;
margin: 0px;
}
div{
width: 100px;
height: 100px;
}
.one{
background-color: pink;
position: static;
/* left: 100px; 不可以使用 */
}
.two{
background-color: coral;
/* position: relative;
left: 10px;
top: 10px; */
/* position: absolute;
left: 20px;
top: 20px;
*/
设置相对定位后的显示样式（相对为自己本身定位）：
position: relative;
left: 10px;
top: 10px;
设置绝对定位后的显示样式（父元素没有定位属性，根据浏览器左上角进行定位）
position: absolute;
left: 20px;
top: 20px;
补充（外边距合并问题）：
3）伸缩盒布局
父元素设置display：flex
flex-direction:row列布局为默认 主轴为x轴（横轴）
设置如下代码：
<style type="text/css">
.outer{
width: 1000px;
height: 400px;
border: 1px solid red;
display: flex;
/* 默认的列布局 默认的 主轴为x */
/*flex-direction: row；*/
/* 行布局 主轴为y */
/*flex-direction: column;*/
/* 行布局翻转 */
/* flex-direction: column-reverse; */
/* 列布局翻转 */
/*flex-direction: row-reverse; */
}
.outer > div{
flex: 1;
}
.one{
background-color: pink;
}
.two{
background-color: coral;
}
.three{
background-color: teal;
}
</style>
如上代码显示结果为：
flex-direction: column设置主轴为y轴（竖轴）
设置 row-reverse 列布局反转
colum-reverse 行布局反转 （与列类似）
其他属性： justify-content
指的是子元素在主轴方向上的位置
设置值：
flex-start 开始位置
flex-end 结束位置
center 中间位置
space-between 均匀分布 第一个元素要在主轴开始的位置 最后一个元素要在主轴结束的位置
space-around 均匀分布 第一个元素不在主轴开始的位置 最后一个元素不在主轴结束的位置
属性 align-item
指的是子元素在交叉轴方向上的位置
设置值：
flex-start 开始位置
flex-end 结束位置
center 中间位置
stretch
属性 align-content
多主轴的时候，设置子元素在交叉轴上的位置
子元素 可以不设置或设置flex值
flex 占父元素的几等份
也可以为具体的值
4）栅格布局
第三方布局机制，利用浮动布局或者定位布局封装的企业级布局机制
boostrap 12栅格
element-ui 24栅格
4.如何实现盒子水平垂直居中，尽可能多的方式说明
行内元素 水平垂直居中 text-align：center；
line-height：和父元素同高。
块级元素 水平垂直居中
1.给父元素设置相对定位relative 给子元素设置绝对定位absolute
并且left right top bottom都设置为0
设置margin:auto;
2.给父元素设置绝对定位 给子元素设置绝对定位 absolute
并且把left设置为子元素宽度的一半 top设置为子元素高度的一半
3.给父元素设置绝对定位 给子元素设置绝对定位
并且把left设置为父元素宽度的一半 减去子元素宽度的一半
top设置为父元素高度的一半 减去子元素高度的一半
left: calc(50% - 100px);
top: calc(50% - 100px);
3.给父元素设置绝对定位 给子元素设置绝对定位
并且把left设置为父元素宽度的一半 50%
top设置为父元素高度的一半 50%
margin-top:负的子元素的高度的一半
margin-left:负的子元素的宽度的一半
position: absolute;
left: 50%;
top: 50%;
margin-left: -100px;
margin-top: -100px;
5.简述http协议
含义：超文本传输协议，用于从万维网向浏览器端发送超文本数据的协议
超即：音视频、图片、文本等也可以进行传输
请求报文组成有： 请求行（ 请求地址， 请求方式）、 请求头（ contentType:‘application/xx’， token）、请求体（参数）
响应报文组成有： 响应行（ 状态码及描述，比如200，ok）、 响应头、响应体（服务端返回的数据）
6. 简述一下从在浏览器打开一个网页到网页加载完毕中间发生了什么事情？越详细越好
输入url -> 浏览器会将输入的url封装为请求报文 -> 浏览器将请求报文发送给服务器 -> 服务器解析请求报文，拿到path及参数等信息 -> 会根据解析出来的信息查询数据 -> 将查询到的数据封装为响应报文 -> 将响应报文发送给浏览器 -> 浏览器解析响应报文
7. 简述javascript对象的几种创建方式
（1）字面量创建
var obj= {}
（2）Object构造函数创建
Object obj= new Object（）
（3）工厂函数
function factory（）{
return {}
}
var obj = factory()
（4）构造函数模式
function Person（）{
}
var obj=new Person()
（5）原型模式，所有实例的属性和方法都在构造函数的原型对象中，对于每一个实例所私有的属性和方法不友好。
（6）构造函数+原型模式(组合模式)
实例私有的属性和方法放到构造函数中，实例公共的属性和方法放到原型对象中
function Person(){}
Person.prototype.sayName = function(){}
var obj = new Person()
8. ajax是什么？你在开发中如何使用ajax?
ajax是异步的javascript和xml。用于进行异步的请求
一般用于前后台分离开发的数据交互
方法：
1) 原生xhr
1. 创建实例
var xhr = new XmlHttpRequest()
2. 设置请求行
xhr.open(method, url)
3. 设置请求头
4. 设置请求体，发送请求
xhr.send(data)
5. 监听响应
xhr.onreadystatechange = function(){
}
2) jquery的ajax
$.ajax({})
$.get()
$.post()
9. 什么是深拷贝和浅拷贝，如何进行浅拷贝
深拷贝就是内容的复制
浅拷贝就是引用地址的复制
对象的拷贝:
var obj = {};
var o = obj; 浅拷贝
对象深拷贝的三种方式：
1.Object.assign({},obj) obj为拷贝对象，{}为对象框
2.var obj2={…obj}
3.var obj2=JSON.parse(JSON.stringify(obj))
DOM的复制：深拷贝就是复制本身及内部内容，浅拷贝是复制节点不复制内部内容。
dom.cloneNode(false) 浅复制
dom.cloneNode(true) 深复制
10. js中如何监听一个对象中属性的变化
设置自定义属性：
Object.defineProperty(obj,’name’,{
set:function(param){
console.log(‘属性发生更改，在这里监听。。。’);
}
})
obj.name = ‘zhangsan’; 就可以执行set方法进行监听属性的变化
11. 模拟Array.prototype.forEach编写Array.prototype.myForEach
Array.prototype.myForEach = function(handle,obj){
for(var i=0;i<this.length;i++){
handle.call(obj,this[i],i,this);
}
}
12. 如何理解js中的原型
每一个构造函数都有一个原型对象，通过构造函数的prototype属性访问原型对象，也可以通过实例的__proto__属性来访问。
实例所能调用的属性和方法可以是实例本身的，也可以是实例的原型对象的。
通过原型可以实现原型链继承，原型链继承需要将子元素的原型对象指向父元素的实例。
通过Object.getPrototypeOf()来获取原型对象，通过Object.setPrototypeOf()来设置原型对象
13. 当我们调用一个方法如何获取该方法的反馈结果？分别在哪种情况下使用。
可以使用return一个值来返回结果(同步的时候使用)，或者使用回调函数来将结果抛出（异步的时候使用）。
返回值
function test(a,b){
return a+b;
}
回调函数
function test(a,b,fun){
fun(a+b);
}
14. 说明RegExp.prototype.test()与String.prototype.search()的异同点
相同点：都是用于检测字符串中是否有满足正则表达式的内容
不同点：test()是正则表达式对象调用的，支持全局检索，返回true或者false
pattern.test(str)
search()是字符串调用的，不支持全局检索,返回索引或者-1
str.search(pattern)
15. 在开发过程中，我们经常会使用到cdn资源，请说明你在什么情况下使用了cdn资源，使用cdn好处在哪里？
在ajax需要给post后台传递表单格式数据的时候，使用了qs。是从bootcdn中获取的qs的资源。
引用第三方资源的时候使用cdn,例如导入jQuery、iconfont、animate.css等资源的，无需下载，只需要通过script或link方式导入cdn的资源即可。好处在于其加载速度高，获取方便。
16. 简述事件流
含义：页面接收事件的顺序，发生在嵌套的html结构中，为每层html都绑定事件
事件冒泡：事件由具体的点接受，从内往外传递到不具体的点接受。
事件捕获：事件由不具体的点接受，从外往内到具体的点接受。
DOM事件流：先事件捕获，先由不具体的点接受，从外往内到具体的点接受，然后再事件冒泡，从内往外传递到不具体的点接受。
17. 什么是事件代理？什么情况下会使用事件代理？
不将事件处理函数直接绑定到目标dom元素上，而是绑定在其父元素上。其好处在于只需要在父元素绑定就可以为所有的子元素代理事件，当子元素动态添加或者删除的时候也不会影响。
在子元素动态添加或者删除的时候，使用事件代理
18. 在阿里云使用过程中，如何进行文件的远程传输？如何进行远程登录？
scp命令用于远程传输，也可以使用fillzilla、cyberDuck(小黄鸭)等第三方工具
ssh命令用于远程登录 ssh 用户名@ip地址
19. 为什么要使用阿里云？它在我们开发中扮演什么角色？
阿里云可以提供一个远程服务器，可以使用它进行linux学习，js学习，也可以用于搭建个人网站。
阿里云等云服务器一般作为项目的部署服务器，需要在阿里云上安装一些项目部署的环境，需要掌握基本的命令操作和vim操作。
20. 假设有数组[8,2,32,4,1,9],编写算法进行升序排列，算法不做要求，可以使用冒泡/选择/插入…
var arr = [8,2,32,4,1,9];
第一种：var result = arr.sort();
第二种：var result = arr.sort(function(a,b){
return a-b;
});
第三种：var result = arr.sort(function(a,b){
if(a-b<0){
return -1;
}
return 1;
})
第三种（冒泡排序）：for (var i = 0; i < arr.length-1; i++) { //控制比较几轮
for (var j = 0; j < arr.length - 1 - i; j++) { //控制每轮内的比较
if (arr[j] > arr[j + 1]) {
var temp = arr[j];
arr[j] = arr[j + 1];
arr[j + 1] = temp;
}
}
}
第四种（选择排序）：for (var i = 0; i < arr.length - 1; i++) {
//假设0位是最小的
var minIndex = i;
//从之后的元素中找最小的
for (var j = i + 1; j < arr.length; j++) {
if(arr[j] < arr[minIndex]){
minIndex = j;
}
}
var temp = arr[i];
arr[i] = arr[minIndex];
arr[minIndex] = temp;
}
第五种（插入排序）：for(var i=0;i<arr.length-1;i++){
//比较相邻元素，如果当前要插入的元素比之前的相邻元素小，交换
for(var j=i+1;j>0;j–){
if(arr[j]<arr[j-1]){
var temp = arr[j];
arr[j] = arr[j-1];
arr[j-1] = temp;
}
}
console.log(‘第’+(i+1)+‘轮’,arr);
}
console.log(‘排序后的数组’,arr);