浮动元素引起的问题和解决方法？
问题：
1.多个浮动元素脱离文档流无法撑开父集元素的宽度，父元素的宽度可能变成0
2.与浮动元素同级的（内联元素）非浮动元素也会跟随其后，也是由于浮动元素脱离文档流，不占用文档流的位置。
3.如果该浮动元素不是同级的第一个元素，会影响整个页面的结构显示。
解决方法：
1.在最后一个浮动元素上添加clear：both
2.给父集添加clear：both的after:伪元素
3.overflow:auto,over:hidden,
请描述一下你对ajax的理解？ajax同步与异步的区别？如何理解跨域问题？（有能力可描述一下什么是http请求）
理解：ajax可以实现无刷新交互，更新数据大大减少了，对服务器的负担。XMLHttpRequest对象是ajax的核心，他有很多属性和方法
1.readyState()
当一个XMLHttpRequest()对象创立后，readyState()属性表示了当前对象处于什么样的状态，可以通过对象的属性来访问来判断此次请求的状态然后做出相应的操作。
0：未初始化状态，此时，已经创建了一个XMLHttprequest对象，但是还没有初始化
1:准备发送状态：此时，已经调用了XMLHttprequest()对象的open（）方法，并且XMLHttpRequest（）已经准备好将一个对象发送到服务器
2：已发送状态:此时已经通过send()方法把一个请求发送到服务器端，等待响应
3：正在就收状态，此时已经接受到HTTP响应头部信息，但是信息体部分还没有完全接受到
4：完成响应状态，此时已经完成了HttpRequest响应的接受
responceText属性
responceText属性包含客服端接受到的HTTP响应的文本内容，当radyState属性为0,1,2时，responceText包含一个空的字符串：当radyState属性值为3时，响应中包含客服端还没完成的响应信息；当readyState值为4时，responceText才包含完整的响应信息
responseXML属性
只有当readyState属性为4，并且响应头部的Content-Type的MIME类型被指定为XML(text/xml或者application/xml)时，该属性才会有值并且被解析成一个XML文档，否则该属性为null。如果是回传的XML文档结构不良或者未完成响应回传，该属性也会为null。responseXML属性用来描述被XMLHttpRequest解析后的XML文档的属性。
status属性
status属性描述了HTTP状态代码，注意，仅当readyState属性值为3（正在接受中）或者4（已加载）时，才能对此属性进行访问。如果在readyState属性值小于3时，试图去读取status属性值，将引发一个异常
statusText属性
statusText属性描述了HTTP状态代码文本，并且仅当readyState属性为3或者4才可用。当readyState属性为其他值时试图存取statusText属性将引发一个异常
.onreadystatechange事件
每当readyState属性发生改变时，就好触发onreadystatechange事件，一般都要通过该事件来触发回传处理函数。
open()方法
XMLHttpRequest对象是通过调用open(method,uri,async,username,password)方法来进行初始化工作的。调用该方法将得到一个可以用来进行发送的对象，open有五个参数。
//method参数是必须的，用来指定发送请求的HTTP方法（GET,POST,PUT,DELETE,HEAD)参数要大写。
//async参数用用指定是否请求是异步的，默认是true。如果需要发送一个同步请求，需要把该参数设置为false。
//如果需要服务器验证访问用户的情况，可以设置username和password
send方法
调用open()方法后，就可以通过调用send()方法按照open方法设定的参数将请求进行发送。当open方法中async为true，在send（）方法调用后立即返回，否则将会中断直到请求返回。要注意的是，send方法必须在readyState为1时调用open方法以后才能调用。在调用send方法以后到接收响应信息知情，readyState属性的值将被设置成2.一旦接收到响应信息，readyState属性将被设为3.直到响应接收完成，readyState属性的值才会被设定为4。
send()方法使用一个可选的参数，该参数可以包含可变类型的数据。用户可以使用它并通过POST方法把数据发送到服务器。另外可以显示的使用null参数调用sned方法，这与不用参数调用该方法一样。对于大多数其他的数据类型，在调用send方法之前，应该使用setRequestHeader()方法先设置Content-Type头部，如果send（data)方法中的data参数的类型为DOMString,那么数据将被编码成UTF-8，如果是Document类型，那么将使用由data.xmlEncoding指定的编码串行化该数据。
abort()方法
该方法可以暂停一个HttpRequest的请求发送或者HttpResponse的接收，并且将XMLHttp Request对象设置 为初始化状态
setRequestHeader()方法
该方法用来设置请求的头部信息。当readyState属性为1时，可以调用opne方法后调用这个方法；否则将得到一个异常。setRequestHeader(header,value)方法包含两个参数，第一个是header键名称，后一个是键值
getResponseHeader方法
此方法用于检索响应的头部值，仅能当readyState属性是3或者4（既响应头部可用以后）才可用调用该方法。否则，该方法返回一个空字符串。此外，还可以通过getAllResponse Header()方法获取所有的HttpResponse的头部信息同步与异步
同步：发送方发出数据后，等接收方发回响应以后才发下一个数据包的通讯方式用户填写所有信息后，提交给服务器，等待服务器的回应（检验数据），是一次性的。信息错误又要重新填写
异步：发送方发出数据后，不等接收方发回响应，接着发送下个数据包的通讯方式当用户填写完一条信息后，该信息会自动向服务器提交，然后服务器响应客户端，在此过程中，用户依然在填写表格的信息，即向服务器请求多次，节省了用户的时间，提高了用户的体验
什么是CSS sprites 如何使用？
国内哟很多人叫css精灵又称雪碧图，是一种网页图片应用的处理方式。他允许你将一个页面涉及到的所有零星的图片都包含到一张大图去，这样一来，当访问页面时，载入图片就不会像以前那样一幅一幅地慢慢的显示出来。
请简述一下jquery中的bind(),live()delegdate,on()的区别
bind方法
bind()方法用于对匹配的元素进行特定事件的绑定。它直接绑定在现有的元素节点上，也很好的解决了浏览器在事件处理中的兼容问题。例如，它的调用格式如下：
bind(type, [data], fn) //事件类型(必选)，传递的参数(可选)，相关的函数(‘a’)元素，并把alert函数绑定到每个元素的click事件上
live()方法
live()是事件委托的概念来执行，把节点的处理委托给了document，向当前或未来的匹配元素添加一个或多个事件处理器。
live(type, [data], fn) //事件类型(必选)，传递的参数(可选)，相关的函数
(document)元素上，并使用'click'和'a'作为参数。只要有事件冒泡到document节点上，它就查看该事件是否是一个click事件，以及该事件的目标元素与'a'这一CSS选择器是否匹配，如果都是的话，则执行函数
delegate()方法
delegate()方法的行为有点类似live()。但是不是把选择器和事件的信息附加到了document上，而是可以自行选择它要附加的DOM元素，这个技术可以让事件的委托正常工作。我们的选择又多了一些灵活性，不单可以利用事件委托，还可以选择委托的对象。它适用于当前或未来的元素（比如由脚本创建的新元素）。
delegate(selector,[type],[data],fn)//元素节点(字符串形式，一般是子级元素childselector)，事件类型，传递的参数(可选)，相关的函数(‘#container’)，并使用click事件和’a’这一CSS选择器作为参数把alert函数绑定到
(‘#container’)上，它就查看该事件是否是click事件，以及该事件的目标元素是否与CCS选择器相匹配。如果两种检查的结果都为真的话，它就执行函数
on()方法
on()方法绑定事件处理程序到当前选定的jQuery对象中的元素。它是在1.7版本中被提出来的，提供绑定事件处理程序所需的所有功能。用于替换 bind()、delegate()和 live()。
on(events,[selector],[data],fn) // 事件类型，元素节点(可选)，传递的参数(可选)，相关的函数
特点区别?
bind()的特点：直接绑定在已经存在的元素上，但是对在它执行完后动态添加的那些元素上不起作用。因为直接绑定在具体的元素上，响应事件及时，它是出现最早的一种绑定事件的方法。这种方法很浪费资源，引起性能问题，因为它要匹配选择器中的每一项并且挨个设置相同的事件处理程序。如果在页面加载前要处理添加事件的话，会影响加载效率的。在jquery1.7版本以前比较受推崇。在jquery1.7版本之后，官方推荐使用on()方法代替。在jquery3.0版本之后，已经删除该方法。
live()的特点：与bind()的实现原理却不同。live()方法附加事件处理程序在document上通过冒泡来关联匹配到相应的元素和事件信息。对新添加的元素依然有效。不需要在每个元素上去绑定事件，而只在document上绑定一次就可以了。可以在document ready之前就可以绑定那些需要的事件。但是jquery1.9版本之后，已经被弃用了。
delegate()方法的特点：更精确的小范围使用事件代理，性能优于live()。它可以自由选择附加的选择器和事件信息的位置，把事件绑定到具体元素的上一级较稳定（不会动态地添加或者删除、变化）的元素上，缩短了事件冒泡的路径。同样对新添加的元素依然有效。在jquery3.0版本之后，已经删除该方法。
on()的特点：是以上三种方法的统一。可以使用一个方法，设置不同参数值来实现上述三种方法的功能。简化了jQuery代码库，并删除一个界别的重定向。
谈谈你对this的理解
在JavaScript中this表示函数运行的时候自动生成的一个内部对象，只能在函数内部使用
- 在全局的调用函数this指向window
function fn(){
console.log(this) //window
}
- 对象函数调用，哪个对象调用就指向哪个对象
var input = document.getElementsByTagName('input')[0]
input.onclick = function(){
console.log(this) //input对象
}
3.setInterval和setTimeout定时器中的this指向全局
var a =10;
var fn = setInterval(function (){
var a = 20
alert(this.a) //10
clearInterval(fn)
},100)
- addEventListener this的指向
addEventListener this指向事件前的dom对象在IE11下attachEvent this 指向window
<div id="btn">
点击我
</div>
<script>
btn.addEventListener('click',function(){
console.log(this) //<div>点击我</div>
})
IE下
IE11不兼容
btn.attachEvent('onclick',function(){
alert(this) //window
})
</script>
- 构造函数this的指向
构造函数中的this指向构造出的新对象
function fn(){
this.name = 'aaa',
this.age = '18',
this.sayName = function(){
alert(this.name)
}
}
var p1 = new fn()
p1.sayName() //aaa
- 箭头函数this的指向
在fun1中箭头函数默认指向为window而fun2是在data对象中创建的this指向data对象，所以fun2中的this指向对象
const fun1 = () => {
alert(this) //window
}
const data = {
name:校长',
fn: function (){
console.log(this)
const fun2 = () =>{
console.log(this.userName)
}
fun2()
}
}
data.fn()
- call()和apply()bind()
xw.say.call(xh);
xw.say.apply(xh);
xw.say.bind(xh)()
如果直接写xw.say.bind(xh)是不会有任何结果的，看到区别了吗？call和apply都是对函数的直接调用，而bind方法返回的仍然是一个函数，因此后面还需要()来进行调用才可以但是只能改变一次
xw.say.call(xh,"实验小学","六年级")
xw.say.apply(xh,["实验小学","六年级[郑州牛皮癣医院]
xw.say.bind(xh,"实验小学","六年级")()
看到区别了吗，call后面的参数与say方法中是一一对应的，而apply的第二个参数是一个数组，数组中的元素是和say方法中一一对应的，这就是两者最大的区别。
sessionStorage、localStorage、cookie之间的区别
共同点：都是保存在 浏览器端，且同源的
区别：cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递；cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下。存储大小限制也不同，cookie数据不能超过4k，同时因为每次http请求都会携带cookie，所以cookie只适合保存很小的数据，如会话标识。
而sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。
数据有效期不同，sessionStorage：仅在当前浏览器窗口关闭前有效，自然也就不可能持久保持；localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭
作用域不同，sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面；localStorage 在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的。Web Storage 支持事件通知机制，可以将数据更新的通知发送给监听者。Web Storage 的 api 接口使用更方便
谈谈对B包的设计思想
函数可以通过作用域链相互关联起来，函数体内部的变量可以保存在函数作用域内。
为什么要使用B包?
1.因为B包可以访问到函数内部的变量并且会将这些变量的值一直保存在内存中。
2.因为B包引用函数不会被清除，可能会造成内存泄漏的问题，贴别是IE
B包的特性？
1.函数嵌套函数
2.函数内部可以引用外部的参数和变量
3.参数和变量不会被垃圾机制回收
get和post请求的区别
1.效率
GET的意思是『得』，从服务器获取数据（也可以上传数据，参数就是），效率较高
POST的意思是『给』，但可以向服务器发送数据和下载数据，效率不如GET
2.缓存
GET 请求能够被缓存，默认的请求方式也是有缓存的
POST请求默认不会缓存
缓存是针对URL来进行缓存的，GET请求由于其参数是直接加在URL上-的，一种参数组合就有一种URL的缓存，可以根据参数来进行一一对应，重复请求是幂等的（不论请求多少次，结果都一样）;
而POST请求的URL没有参数,每次请求的URL都相同，数据体（HTTPBody）可能不同，无法一一对应，所以缓存没有意义3.安全性
GET的所有参数全部包装在URL中，明文显示，且服务器的访问日志会记录，非常不安全
POST的URL中只有资源路径，不包含参数，参数封装在二进制的数据体中，服务器也不会记录参数，相对安全。所有涉及用户隐私的数据都要用POST传输
POST的安全是相对的，对于普通用户来说他们看不到明文，数据封装对他们来说就是屏障。但是对于专业人士，它们会抓包会分析，没有加密的数据包对他们来说也是小case。所以POST仅仅是相对安全，唯有对数据进行加密才会更安全。当然加密也有被破解的可能性，理论上所有的加密方式都可以破解，只是时间长短的问题。而加密算法要做的就是使得破解需要的时间尽量长，越长越安全。由于我们也需要解密，加密算法太过复杂也并非好事，这就要结合使用情况进行折中或者足够实际使用即可。绕的有点远，具体的话，我将在后续的文章之中介提及，并介绍一些常用的加密算法。4.数据量
GET：不同的浏览器和服务器不同，一般限制在2~8K之间，更加常见的是1k以内
POST方法提交的数据比较大，大小靠服务器的设定值限制，PHP默认是2M（具体的话大家以后看后端给的开发文档就行了）
