打算三月中旬开始找一份合适的工作,现在开始整理些面试题，也是顺便对于自己知识系统的整理
css部分
(1)css3选择器
子元素选择器：> 、 nth-child(n)、nth-of-type(n)
>比较常见，用于选择当前标签的所有子元素
:nth-of-type为什么要叫:nth-of-type？因为它是以"type"来区分的，
也就是说：ele:nth-of-type(n)是指父元素下第n个ele元素，
而ele:nth-child(n)是指父元素下第n个元素且这个元素为ele
复制代码nth-child(n)、nth-of-type(n)区别这里附上一个小例子： 代码如下:
"demo">
zero
- one
- two
上面这个例子，li:nth-child(2)选择的是one 节点
，而 li:nth-of-type(2)则选择的是two 节点
复制代码兄弟选择器：+和~
+用于选择当前标签后面一个同级元素
li:nth-child(2) + li{} //选择第二个元素之后的一个同级元素
复制代码~用于选择当前标签后面的所有同级元素
li:nth-child(2) ~ li{} //选择第二个元素之后所有的同级元素
复制代码(2)盒子垂直水平居中
定位
1.盒子宽高已知,position:absolute;left:50%;top:50%;margin-left:-自身一半的宽度;margin-top:-自身一半的高度
2.盒子宽高未知,position:absolute;left:0;top:0;right:0;bottom:0;margin:auto
复制代码table-cell布局
父级
display:table-cell;vertical-align:middle;子级 margin 0 auto;
复制代码定位 + transform;适用于盒子宽高不定
position:relative/absolute;left:50%;top:50%; transform: translate(-50%, -50%); 注意这里启动了3D硬件加速哦 会增加耗电量的
复制代码flex布局
父级：
display: flex;align-items: center;justify-content: center;
复制代码浏览器问题
1.同源策略与跨域
首先介绍下浏览器的策略
● 端口相同
● 域名相同
● 协议相同
复制代码按照阮老师的说法，目前，如果非同源，共有三种行为受到限制。
Cookie、LocalStorage 和 IndexDB 无法读取。
Dom无法获取
Ajax请求
如何实现跨域，在有些必要的场合突破这些限制呢
复制代码AJAX请求的跨域
针对AJAX请求，有两种跨域方式
-
JSONP 只支持get请求，不支持post请求；兼容性较好
-
CORS 支持所有请求；不兼容老旧浏览器
jsonp跨域
jsonp是利用script标签可以跨域访问资源的特性，在页面动态插入script标签，向服务器发出数据请求，服务器接到请求后将数据放在一个指定名字的回调函数中传回
function addScriptTag(src) {
var script = document.createElement('script');
script.setAttribute("type","text/javascript");
script.src = src;
document.body.appendChild(script);
}
window.onload = function () {
addScriptTag('http://example.com/ip?callback=foo');
}
function foo(data) {
console.log('Your public IP address is: ' + data.ip);
};
复制代码cors跨域 cors请求的局限就小很多了，它是一个W3C标准，允许向跨源服务器，发起XMLHttpRequest请求。支持IE10及其以上。
整个CORS通信过程，都是浏览器自动完成，不需要用户参与。
对于开发者来说，CORS通信与同源的AJAX通信没有差别，代码完全一样。浏览器一旦发现AJAX请求跨源，就会自动添加一些附加的头信息，有时还会多出一次附加的请求，但用户不会有感觉。
因此，实现CORS通信的关键是服务器。只要服务器实现了CORS接口，就可以跨源通信
js方面
1.数组的排序算法-冒泡排序
思想：冒泡排序思想：每一次对比相邻两个数据的大小，小的排在前面，如果前面的数比后面的大就交换这两个数的位置 要实现上述规则需要用到两层for循环，外层从第一个数到倒数第二个数，内层从外层的后面一个数到最后一个数
var times=0;
var bubbleSort=function(arr){
for(var i=0;ifor(var j=i+1;jif(arr[i]>arr[j]){//如果前面的数据比后面的大就交换
var temp=arr[i];
arr[i]=arr[j];
arr[j]=temp;
}
console.log("第"+(++times)+"次排序后："+arr);
}
}
return arr;
}
console.log("The result is:"+bubbleSort(arr));
复制代码 项目问题：
这个是最重要的感觉每次回答的都不好；实际项目中遇到的问题；
1.滚动穿透问题
滚动穿透是指在移动端当有fixed遮罩背景和弹出层时，在屏幕上滑动能够滑动背景下面的内容，原因click事件的300毫秒延迟造成的
解决方案：position：fixed
body.modal-open{
position:fixed;
width:100%;
}
复制代码这种方式同样会当弹出层弹出时滚动条会丢失，所以还需要是使用js来保存滚动条的位置，在关闭弹出层时将滚动条还原
var ModalHelper = (function(bodyCls){
var scrollTop;//在闭包中定义一个用来保存滚动条的变量
return {
afterOpen:function(){//在弹出之后记录保存滚动条的位置，并且给body添加，modal-open
scrollTop = document.scrollingElement.scrollTop;
document.body.classList.add(bodyCls);
document.body.style.top = -scrollTop + 'px'
},
beforeClose:function(){//关闭时将，modal-open一处并还原之前保存的位置
document.body.classList.remove(bodyCls);
document.scrollingElement.scrollTop = scrollTop;
}
}
})('modal-open')
复制代码移动端输入框被键盘挡住问题
由于页面没有滑动到底部： 解决方案如下
setTimeout(function(){
document.body.scrollTop = document.body.scrollHeight;
},300);
复制代码未完待续。。。。。等面试回来再补充