去头条面试的一些题目，面试官很好，态度也很好。很想进，水平不够。
.position absolute是相对于谁定位的
如果父元素没有position属性，是相对于body进行位置偏移 如果父元素设置了position属性,无论是fixed absolute relative都会偏移
.两列布局 一列固宽 另一列自适应（尽可能多的方法）
html:
<div id="one"></div>
<div id="two"></div>
css:
1.
#one {
width: 200px;
height: 100px;
float: left;
background: green;
}
#two {
width: calc(100% - 200px);
height: 100px;
float: left;
background: red;
}
2. #one {
width: 200px;
height: 100px;
float: left;
background: green;
}
#two {
height: 100px;
position: absolute;
left: 200px;
right: 0;
background: red;
}
3.
body {
display: flex;
}
#one {
width: 200px;
height: 100px;
float: left;
background: green;
}
#two {
height: 100px;
flex: 1;
background: red;
}
4.
body {
display: grid;
grid-template-columns: 200px 1fr;
grid-template-rows: 100px;
}
#one {
background: green;
}
#two {
background: red;
}
5. #one {
width: 200px;
background: green;
float: left;
height: 100px;
}
#two {
margin-left: 200px;
height: 100px;
background: red;
}
6.#one {
width: 200px;
height: 100px;
background: green;
float: left;
}
#two {
background: red;
overflow: hidden;
}
7. body {
display: table;
width: 100%;
table-layout: fixed;
}
#one {
width: 200px;
background: green;
height: 100px;
display: table-cell;
}
#two {
display: table-cell;
background: red;
}
3.meta的作用 性能优化有关
meta标签的作用有：搜索引擎优化（SEO），定义页面使用语言，自动刷新并指向新的页面，实现网页转换时的动态效果，控制页面缓冲，网页定级评价，控制网页显示的窗口等！ 主要有name和http-equiv两个属性 content代表相对应name http-equiv的值，内容是为了便于搜索机器人查找信息和分类使用的
<meta charset="UTF-8"> <!--声明文档使用的字符串编码-->
<meta name="keywords" content="wzm"><!--网页的主要关键字是什么-->
<meta name="description" content="不超过150个字符"><!--网页的主要内容是什么-->
<meta name="robots" content="none"><!--定义搜索引擎爬虫的索引方式-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"><!--移动端的窗口-->
<meta name="author" content="Lxxyx,841380530@qq.com"><!--作者-->
<meta name="revisit-after" content="7 days" >><!--搜索引擎爬虫的重放时间-->
<meta name="renderer" content="webkit"><!--双核浏览器的引擎渲染方式-->
<meta http-equiv="X-UA-Compatible" content="ie=edge"><!-- 浏览器采取何种版本渲染当前页面 -->
<meta http-equiv="cache-control" content="no-cache"><!--请求和相应的缓存机制--><!-- 先发送请求，与服务器确认该资源是否被更改，如果未被更改，则使用缓存。-->
<meta http-equiv="expires" content="Sunday 26 October 2016 01:00 GMT" /><!--用于设定网页的到期时间，过期后网页必须到服务器上重新传输。-->
<meta http-equiv="refresh" content="2；URL=http://www.lxxyx.win/"> <!-- 跳转页面 -->
<meta http-equiv="Set-Cookie" content="User=Lxxyx; path=/; expires=Sunday, 10-Jan-16 10:00:00 GMT"> <!--cookie期限-->
4.正则表达式
方法：match replace test 元字符： \s \S \d \D \w \W 量词: n+ n* n? ^n n$ 【】
var a = "on-save-dev";
var b = /-[a-z]/g;
var s = a.replace(b, function(str) {
return str[1].toUpperCase()
});
console.log(s);
var str = "http://www.baidu.com?param1=1¶m=2"
var b = /(\w+)=(\w+)/g
var arr = str.match(b);
console.log(arr)
5.web 实现长连接的名字
websocket webRTC comet long-polling http streaming
6.浏览器的缓存 http web 三次握手 四次挥手
7.es6 module.exports exports require
es6 是export import
CommonJS 是module.exports=exports require
不同点
1.CommonJS 模块输出的是一个值的拷贝，ES6 模块输出的是值的引用。
2.CommonJS 模块是运行时加载，ES6 模块是编译时输出接口
8.new对象的时候做了哪些步骤
9.给你一组url 实现并发请求 并且能按固定顺序返回数值
10 loadsh _get()函数
11.promise对象 awit async
12.[1,2,[1,2,[1,2,3]],[4,5,6]]
function change(arr) {
var newarr = [];
var f = function(array) {
for (var i = 0; i < array.length; i++) {
if (array[i] instanceof Array) {
f(array[i])
} else {
newarr.push(array[i])
}
}
}
f(arr);
return newarr;
}
