作业帮web面试总结
都是些很基础的东西 平时不太留意的。甚至是函数的参数，每个参数都是干嘛的。养成好习惯，做东西的时候需要认真！另一方面自己语言组织能力超级烂，很多东西表述的太差。继续努力，自勉！
1.盒模型是必问的。
- 分为标准盒模型和IE盒模型
标准 content +padding+border+marigin width = content
IE盒模型的宽高包含了width = content+padding+border
- 可以通过css box-sizing来进行设置
box-sizing:content-box;(标准盒模型)
box-sizing:border-box;(IE盒模型怪异盒模型)
2.两侧固定 中间自适应。回答的越多越好
- 使用绝对定位
左右使用绝对定位 由于绝对定位脱离标准流 center会自动在左右的下面 使用margin 留出左右元素的宽度 这样可以使中间自适应了
div 元素
left
content
rightcss 样式
/*考虑到浏览器兼容性 最好还是加上这句*/
html,body{ margin: 0px; padding:0; }
.boxleft, .boxright {
position: absolute;
top:0;
width: 200px;
background-color:blue;
}
.boxleft {
left:0;
}
.boxright {
right: 0;
}
.boxcenter {
margin: 0 200px;
background-color: pink;
}
- 使用浮动定位
左右浮动 左右脱离标准流 center 在正常的文档流中 使用margin指定左右边距
left
right
content .boxleft {
float: left;
width: 200px;
background-color:blue;
}
.boxright {
float:right;
width: 200px;
background-color:blue;
}
.boxcenter {
margin: 0 200px;
}该布局法的好处是受外界影响小，但是不足是 三个元素的顺序，center一定要放在最后，这是和绝对定位不一样的地方，center占据文档流位置，所以一定要放在最后，左右两个元素位置没有关系。当浏览器窗口很小的时候，右边元素会被挤到下一行
- 使用flex布局
在外围包裹一层div，设置为display:flex；两侧设为固定的不缩放 宽度中间设置flex：1 。
flex 0 0 200px；可能几个属性会问到 分别是 flex-grow放大比例, flex-shrink缩小比例 和 flex-basis项目将占据固定空间的简写
left
content
right
.wrapper {
display: flex;
}
.boxleft, .boxright {
flex: 0 0 200px;
background-color:blue;
}
.boxcenter {
flex: 1;
background-color: pink;
}3.this 指向。是否严格模式指向的区别
全局情况下 this始终指向window
作为函数调用时，非严格模式指向window ， 严格模式指向undefined
普通函数调用的时候 this 指向window
var x = 10;
function foo(){
console.log(this); //window
console.log(this.x); //10
}
foo()
严格模式下调用的时候this 指向undefined
"use strict"
var x = 10;
function foo(){
console.log(this); //window
console.log(this.x); //10
}
foo() Uncaught TypeError: Cannot read property 'x' of undefined
作为对象方法调用时 指向它的直接调用者
如果在对象方法中定义函数，那么也就是闭包,this是会指向window
var obj = {
x: 10,
foo: function () {
console.log(this) //{x: 10, foo: ƒ}
function f(){
console.log(this); //Window
console.log(this.x); //10
console.log(obj.x===window.x) //true,obj===window.obj
}f();
}
}
obj.foo();
作为构造函数调用时 指向新new 出来的对象
加上new关键字来调用，那么就会创建一个连接到该函数的prototype成员的新对象，同时，this会被绑定到这个新对象上
若构造函数返回一个对象，该对象将作表达式的返回值，而传入构造函数中的this 将被丢弃
4.跨域 什么是跨域？ 几种方式解决方式
协议、域名、端口有任何一个不同，都被当作是不同的域。
jsonp方式
后端设置
Access-Control-Allow-*头 jsonp的方式虽然简便，但有个缺点，就是只支持get请求，对于只支持post的接口就不支持了。通过后台设置Access-Control-*等header，可以解决跨域问题，而且get,post都支持。
/**
* 测试ajax 设置head跨域请求
* */
@RequestMapping(value = "/testCrossOrigin.do", method = RequestMethod.POST)
@ResponseBody
public String crossOrigin(Model model,String number,HttpServletRequest request,HttpServletResponse response)throws Exception{
//设置response header，允许跨域请求
response.setHeader("Access-Control-Allow-Origin","*");
response.setHeader("Access-Control-Allow-Methods","POST");
response.setHeader("Access-Control-Allow-Headers","x-requested-with,content-type");
response.setHeader("Access-Control-Allow-Max-Age","1728000");//单位：秒，这里是20天
Integer result = Integer.parseInt(number);
result = result*result;
return result.toString();
}
Access-Control-Allow-Origin设置允许跨域的白名单，在白名单里的跨域请求是允许的。
Access-Control-Allow-Methods设置接受的方法，这里只接受POST方法。
Access-Control-Allow-Headers设置接受的请求头，用逗号分隔。
Access-Control-Allow-Max-Age设置预检的有效期，单位为秒。发送正式请求前，浏览器会预先发送一个预检请求，如果服务器返回了上述信息，表明是可以跨越请求的，然后才会正式发送请求。预检成功后，在有效期内就不用再发送了。
使用代理
通过修改document.domain来跨子域
将子域和主域的document.domain设为同一个主域.前提条件：这两个域名必须属于同一个基础域名!而且所用的协议，端口都要一致，否则无法利用document.domain进行跨域
主域相同的使用document.domain
使用window.name来进行跨域
window对象有个name属性，该属性有个特征：即在一个窗口(window)的生命周期内,窗口载入的所有的页面都是共享一个window.name的，每个页面对window.name都有读写的权限，window.name是持久存在一个窗口载入过的所有页面中的
使用HTML5中新引进的window.postMessage方法来跨域传送数据
还有flash、在服务器上设置代理页面等跨域方式。个人认为window.name的方法既不复杂，也能兼容到几乎所有浏览器，这真是极好的一种跨域方法。
5. ajax 是什么？ 原理 步骤
(1)创建XMLHttpRequest对象,也就是创建一个异步调用对象.
(2)创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息.
(3)设置响应HTTP请求状态变化的函数.
(4)发送HTTP请求.
(5)获取异步调用返回的数据.
(6)使用JavaScript和DOM实现局部刷新.