一、盒子模型
CSS盒子模型由外到内由：margin（外边距）、border（边框）、padding（内边距）、content（元素内容）组成。
而盒子模型分为两种：1.标准盒模型 2.IE盒模型
它们的区别在于对contentarea（内容区域）的解析不同，说白了，就是对width、height解析不一样（盒子都是一样的，包括margin、border、padding、content）
1.标准盒模型（当设置box-sizing:content-box时）
width、height只包括content（元素内容）
2.IE盒模型（当设置box-sizing:border-box时）
width、height则包括了border（边框）、padding（内边距）、content（元素内容）
width = content + padding×2 + border×2
height = content+ padding×2 + border×2
二、AJAX
之前的已总结，请参照ajax--总结
三、居中（垂直水平对齐）
5种方法：<1>flex <2>定位的三种方法 <3>table-cell
<1>flex弹性布局
display:flex;
/*弹性布局*/
flex-direction:row;
/*横向排列*/
justify-content:space-around;
/*均匀分布*/
flex-wrap:wrap;
/*父类宽度不够自动换行*/
justify-content//横轴方向上的对齐方式。
align-items //纵轴方向上的对齐方式。
缺点：有兼容性问题 <2>定位：3种方式（都有兼容性问题） 1.left.top为50%、margin-left和margin-top为自身宽高的-50%
.main{
position:relative;
width: 200px;
height: 200px;
border: 1px orange solid;
}
.one {
position: absolute;
left: 50%;
top: 50%;
margin-left: -50px;
margin-top: -50px;
width: 100px;
height: 100px;
background: red;
}
2.left、right、top、bottom全设为0，margin：auto。
.main {
position: relative;
width: 200px;
height: 200px;
border: 1px orange solid;
}.one {
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
margin: auto;
width: 100px;
height: 100px;
background: red;
}
3.left.top为50%、transform方法
.main {
position: relative;
width: 200px;
height: 200px;
border: 1px orange solid;
}.one {
position:absolute;
left:50%;
top:50%;
transform:translate(-50%, -50%);
width: 100px;
height: 100px;
background: red;
}
<3>table-cell 不用宽高，无兼容性问题（但是因为太老了，用的很少，知道就可以）
.box {
position: relative;
width: 300px;
height: 300px;
border: 1px solid red;
display: table-cell;
text-align: center;
vertical-align: middle;
}
span {}
四、浮动
1.浮动的初衷:文字环绕图片（+所以没考虑有关布局的问题，所以会产生很多问题） 特性：1.破坏性 2.半脱离文档流 3.紧密排列 4.转化为块元素 破坏性问题→父级塌陷→父级高度变为0→两种解决方法：<1>清除浮动 <2>BFC <1>清除浮动(after伪元素) :after和::after写法是等效的，都可以用来表示伪类对象，前者CSS2，后者CSS3，前者兼容性比后者强，但是开发H5建议使用后者。
.father::after{
content:'.'
display:block
clear:both
}
即在父级元素的最后，添加了一个:after伪元素，通过清除伪元素的浮动，达到撑起父元素高度的目的 进一步理解（深层次原理）：给浮动元素的上面或者下面添加足够的空间 <2>BFC 块状格式化上下文(它是一个独立的渲染区域，***里面的子元素不会影响到外面的元素)
overfloat:hidden
问：特性：计算父容器高度的时候，需要把浮动元素也计算进去 拓展:说道BFC，也可以用来解决父子元素间的拖拽问题 两种解决方法： 1.BFC解决 2.设置padding-top或者border-top（就相当于给父类来了一个可以抓着不动的杠子，设置为1px就好，这样父类就可以不受到子类元素的拖拽），但是！！！相当关键，padding-top直接设置1px就可以了，而border-top必须设置1px solid #000 大概是这个样式，也是就说我们的border-top不能只单单设置1px而不设置其他样式，否则会无效！！！ 拓展:兄弟间元素是重叠问题 对于这个问题，我们可以设置兄弟间的margin，两个margin一样是，之间就是这个margin值，否者谁大，之间的margin值就跟谁一样。 五、原型链
我们可以知道这与原型有关 三者关系：
1.每个构造函数都有一个原型对象(prototype).//即每一个构造函数有一个prototype属性，prototype指向另一个对象(Object)，//这个对象(Object)的所有属性和方法都会被构造函数的实例继承.2.原型对象(prototype)都包含一个构造函数指针(constructor).//prototype就是通过constructor指向Object的.3.实例都包含一个指向原型对象的内部指针(_proto_).//_proto_是查找函数或对象的原型链的方式.提到原型链，我们要知道他和原型、构造函数以及实例有关 如果现在让一个构造函数的原型等于另一个类型实例，这就可以让两个类之间实现一种继承关系，然后把这种所有类型关系连接起来，层层递进，这就形成了一条长长的原型链。 六、闭包
产生闭包的原因：函数在定义的作用域外进行的访问时，会产生闭包 定义：通俗的来说：子函数可以用父函数的变量 更严谨的来说：函数对象可以通过作用域链相互关系起来，函数体内部的变量可以保存在函数作用域内 闭包的优点 <1>函数嵌套函数有利于封装且变量命名不冲突 <2>函数内部可以引用外部的变量和函数 闭包的缺点 参数和变量不会被垃圾回收机制回收 ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ 这样会导致内存泄露 我们可以通过手动清空引用 具体操作我们可以手动让引用=null 七、this指针
- 有对象就指向调用对象
- 没调用对象就指向全局对象
- 用new构造就指向新对象
- 通过 apply 或 call 或 bind 来改变 this 的所指。
- 全局this指向window
- setTimeout指向window
- IE事件监听指向window
- apply（一个参数）伪数组，只有length
- call（多个参数）
- bind（不是立即调用，先给另一个变量，需要调用的时候再使用）
常见状态码：
200：一切正常（请求成功）
201：已创建
202：已接受
301：资源（网页等）被永久转移到其他URL
403：无权限
404：请求的资源（网页等）不存在
500：内部服务器错误
503：服务不可用
505：HTTP版本不受支持
- 1xx：指示信息-表示请求已接受，继续处理。
- 2xx：成功-表示请求已被成功接收、理解、接收。
- 3xx：重定向-要完成请求必须进行更近一步的操作。
- 4xx：客户端错误-请求有语法错误或请求无法实现。
- 5xx：服务器端错误-服务器未能实现合法的请求。
打开浏览器，输入一个网址后，到页面加载完成时，这中间究竟发生了些什么~ 以下是我的理解： 1.首先在浏览器中输入url，按下回车 2.然后浏览器会先在缓存里查找当前url是否有对应的IP，并比较缓存是否过期 3.如果没有的话，就开始检查本地hosts文件里是否有网址映射关系，如果没有，就在DNS缓存里找，以递归的方式进行查找，还没有则在本地DNS服务器里，先根域服务器=>顶级域=>第二层域=>子域进行迭代查询，最后找到域名对应的IP地址 4.根据解析后的IP建立TCP连接（即三次握手）（是建立连接，还没开始传包）
文章图片
image 5.建立连接后，客户端开始向服务器发送请求（包括起始行、请求头和请求主体）就相当于告诉他我准备好接受你发的东西了 6.服务器接受到请求后，开始处理请求，然后发送给客户端他请求的包 7.然后浏览器开始处理接收到的页面文档，首先将HTML解析成DOM树，然后将CSS解析成样式结构体，最后二者结合成render tree（具体的解析过程：简单来说就是CSS不会阻塞解析，但会阻塞渲染render tree，而JS则会阻塞浏览器解析HTML文档）（可能还会涉及回流和重绘问题） 十、为什么有跨域和简述集中跨域方式，见总结：有关jsonp和跨域
十一、未解决：判断数据类型几种方式？及bug和解决方法
js的数据类型 7种
引用数据类型:（也叫复杂数据类型）
1.object（function） alert(Function instanceof Object)//fn属于obj
alert(Object instanceof Function)//obj属于fn
基本数据类型：
2.String
3.number
4.undefined
5.null
6.boolean
7.symbol（Es6）
十二、有哪些选择器
-
- id选择器 #name
-
- 类选择器 .name
-
- 标签选择器 div
-
- 子选择器 div > ul
-
- 包含选择器 div ul
-
- 通用选择器 * （清除默认样式）
-
- 伪类选择器 (允许给不存在的html标签设置样式) :hover :active :before :after
-
- 分组选择器 div, ul
-
- css3 选择器 (神器, 写布局的时候讲)
- 10.！ important
.swiper-pagination-bullets{
bottom: -9px !important;
}十三、优先级问题
理解优先级规则:
1. 选择器的权值：标签的权值为1，类选择器的权值为10，ID选择器的权值为100。
2. 对于同一元素的有多个相同权值样式存在时，根据这些样式的前后顺序决定。
<1> 选择器的优先级（面试题）（引出important） 顺序: !important > 行内样式 > ID选择器(#id) >类选择器( .class)=伪类=属性 > 标签(span)
<2>样式表的优先级（面试题）
1. 行内样式
2. 内联样式
3. 外联样式样式表优先级: 行内样式（标签内部）> 嵌入样式表（当前文件中）> 外部样式表(简述下css代码的优先级)
十四、CSS可以继承哪些属性
参考：https://www.cnblogs.com/thislbq/p/5882105.html
继承: 所有和字体相关的样式都能继承
text-align
line-height 文字居中
color
font-size
font-weight
font-style
font-family 字体
text-decoration 下划线
text-indent 缩进
a不能继承颜色
i, em 不能继承斜体
b, strong, h1-h6 不能继承加粗
十五、说说垃圾回收机制，还有内存泄漏什时候会出现以及解决方法
JS的垃圾回收机制有两种:<1>标记清除<2>引用计数 <1>标记清除（也是目前主流的垃圾收集算法）：它的思想是给当前不适用的值加上标记，然后再回收他们的内存。 <2>引用计数（JS引擎目前都不再使用这种算法）：这种方法的思想就是根据跟踪记录所有值被引用的次数，引用为0时，即收回内存 内存泄露在什么时候出现：内存泄漏是在IE浏览器下，使用闭包操作DOM元素的时候产生的，具体来说，如果闭包的作用域中保存着一个HTML元素，它会创建一个循环引用，导致该元素的引用数至少也是1，永远无法被销毁。 内存泄露可以通过手动消除引用的方式来解决，手动将引用设置为null 十六、用定时器写时钟 解决误差的问题
解决误差的方法：可以用当前时间 - 开始时间，来取得中间的时间差，然后根据时间差来动态计算指针划过的刻度，这样就可以减少因为执行过程所带来的误差值。 【关于知识点】for(var i = 0; i < 10000000000000; i++){i++} setTimeout(function(){alert(1)}, 30);
十七、获取屏幕及div宽高
获取视窗宽度
let htmlWidth = document.documentElement.clientWidth || document.body.clientWidth;
console.log(htmlWidth);
获取div宽高 div的Id为“aaa”
十八：after伪元素画横线
.selectSolo {
padding: 20rpx 46rpx;
position: relative;
}.selectSolo::after {
content: "";
width: 100%;
height: 2rpx;
background: rgb(233, 178, 178);
bottom: 0;
left: 0;
position: absolute;
}
