美团面试题知识点总结

、一、display的属性值

1.none 此元素不会被显示。
none：隐藏对象。与 visibility 属性的hidden值不同，其不为被隐藏的对象保留其物理空间，且*DOM不加载！*

与visibility:hidden的区别：
使用该属性后，HTML元素（对象）仅仅是在视觉上看不见（完全透明），而它所占据的空间位置仍然存在，也即是说它仍具有高度、宽度等属性值。
2. block 此元素将显示为块级元素，此元素前后会带有换行符。 （重点）
3**inline** 默认。此元素会被显示为内联元素，元素前后没有换行符。 （重点）
4**.inline-block** 行内块元素。（CSS2.1 新增的值） （重点）

5.table 此元素会作为块级表格来显示（类似 <table>），表格前后带有换行符。

二、面试题，浏览器渲染时，CSS样式的加载顺序？
考察以下知识点：

CSS的三种样式：内联式，嵌入式，外部式
这三种样式是有优先级的，记住他们的优先级：内联式>嵌入式 > 外部式，但是嵌入式>外部式有一个前提：嵌入式css样式的位置一定在外部式的后面。

其实总结来说，就是就近原则（离被设置元素越近优先级别越高）。

但注意上面所总结的优先级是有一个前提：内联式、嵌入式、外部式样式表中css样式是在的相同权值的情况下(?)

三、笔试题查考css选择器

A>B 表示选择A元素的所有子B元素。
与A B的区别在于，A B选择所有后代元素，而A>B只选择一代。

四、position属性值
关于它的理解：查看 http://web.jobbole.com/90352/（下面的文字描述不清晰，面试看这个，答出三点：1.使用场景(滚动然后固定)，2.阈值，3.生效规则）

position:sticky用法(百度面试漏掉的一个)
position:sticky是一个新的css3属性，它的表现类似position:relative和position:fixed的合体，在目标区域在屏幕中可见时，它的行为就像position:relative; 而当页面滚动超出目标区域时，它的表现就像position:fixed，它会固定在目标位置。(面试答这段)

sticky属性的使用场景

常见的吸顶、吸底（移动端网站的头部返回栏，底部切换栏之类）的效果用这个属性非常适合。

position属性中最有意思的就是sticky了，设置了sticky的元素，在屏幕范围（viewport）时该元素的位置并不受到定位影响（设置是top、left等属性无效(?是吗，实验测试)），当该元素的位置将要移出偏移范围时，定位又会变成fixed，根据设置的left、top等属性成固定位置的效果。

可以知道sticky属性有以下几个特点：

该元素并不脱离文档流，仍然保留元素原本在文档流中的位置。

当元素在容器中被滚动超过指定的偏移值时，元素在容器内固定在指定位置。亦即如果你设置了top: 50px，那么在sticky元素到达距离相对定位的元素顶部50px的位置时固定，不再向上移动。
元素固定的相对偏移是相对于离它最近的具有滚动框的祖先元素，如果祖先元素都不可以滚动，那么是相对于viewport来计算元素的偏移量

比较烦的是这个属性的兼容性还不是很好，目前仍是一个试验性的属性，并不是W3C推荐的标准。它之所以会出现，也是因为监听scroll事件来实现粘性布局使浏览器进入慢滚动的模式，这与浏览器想要通过硬件加速来提升滚动的体验是相悖的。(?)

IE11完全不支持，Firefox和chrome只是部分支持。

该网站对该属性的解释

Keeps elements positioned as “fixed” or “relative” depending on how it
appears in the viewport. As a result the element is “stuck” when
necessary while scrolling.

　简单的说，要让sticky属性生效的条件有以下两点：（不太理解？）

• 一个是元素自身在文档流中的位置

• 另一个是该元素的父容器的边缘

  　　第一点上面已经讲过了，如果设置了top: 50px，那么元素在达到距离顶部50px时才会发生定位，否则并不会发生定位。

  　　第二点则需要考虑父容器的高度情况：sticky元素在到达父容器的底部时，则不会再发生定位，如果父容器高度并没有比sticky元素高，那么sticky元素一开始就达到了底部，并不会有定位的效果。

  　　此外还有一点就是父元素的overflow属性，如果父元素的overflow属性并不是默认的visible属性，那么sticky元素则相对于该父元素定位。也就是如果要定位在顶部的话，此时这个效果就无效了。。。

position的其他属性值

position:static, 在静态定位的情况下，每个元素在处在常规文档流中。它们都是块级元素，所以就会在页面中自上而下地堆叠起来；
positon:relative，相对定位下，可以利用top 和left 属性相对于元素在文档流中的常规位置(自己)重新定位；
position:absolute，绝对定位下，元素从文档流中被“连根拔起”，然后再相对于其他元素（在这里，是默认的定位上下文body）定位；

注意：relative未脱离文档流，absolute脱离文档流。

Position:fixed，但不同之处在于，固定定位元素的定位上下文是视口（浏览器窗口或手持设备的屏幕），因此它不会随页面滚动而移动，固定定位并不常用，最常见的情况是用它创建不随页面滚动而移动的导航元素。

五、相对定位和绝对定位区别：
DIV CSS中的绝对定位和相对定位的区别，我从网上看了好多，都没个详细的说法，其实也不用搞到那么复杂的。

先说相对定位：跟它的名一样，相对嘛，要有一个参照物，但这个参照不是别的，是它自己呢，也就是说没设相对定位的位置，那你会问了，设没设都在那个位置为什么要设呢，因为只有设置了才能使 TOP,LEFT这些生效，也就是设了才能相对自己原来的位置*偏移，原来的位置保留着，偏移后会把其它的层遮罩住*。

再说绝对定位：在布局里不可能有绝对定位的，再怎么样都有一个参照位置的，绝对定位的参照位置就不像相对那样是自己了，至于是哪个，就看它的上级或上上级有没有定位了，也就是有没有position:relative;或position:fixed了，好像position:inherit;也行，前面两个可以，后面那个不设什么的不用也行，最好用position:relative;吧,转入正题，当要绝对定位的层设好要参照位置的层后，就可以用TOP，LEFT这些来定位置了，如果它的上级或上上级都没定位的话只就会根据BODY的位置来定位了,还有最后一点，绝对定位是不占位置的，它会像PS的图层一样单独做一层，至于第几层你可以通过z-index:这个属性来设置

特性（坑）
1、sticky 不会触发 BFC。如果不知道 BFC 可以看这里。
2、z－index 无效。
3、sticky 是容器相关的，也就说 sticky 的特性只会在他所处的容器里生效。这个比较抽象。

在这里，看完之后就懂了。强调这一点是因为在实际使用中，碰到 body 设置 height：100% 的时候 sticky 元素停在某一个位置不动了。

参考：http://web.jobbole.com/90352/

总结：

position的含义是指定位类型，取值类型可以有：static、relative、absolute、fixed、inherit和sticky，这里sticky是CSS3新发布的一个属性。

1、position: static

　　static(没有定位)是position的默认值，元素处于正常的文档流中，会忽略left、top、right、bottom和z-index属性。

2、position: relative

　　relative(相对定位)是指给元素设置相对于原本位置的定位，元素并不脱离文档流，因此元素原本的位置会被保留，其他的元素位置不会受到影响。

3、position: absolute

　　absolute(绝对定位)是指给元素设置绝对的定位，相对定位的对象可以分为两种情况：

　　1) 设置了absolute的元素如果存在有祖先元素设置了position属性为relative或者absolute，则这时元素的定位对象为此已设置position属性的祖先元素。

　　2) 如果并没有设置了position属性的祖先元素，则此时相对于body进行定位。(忘说)

4、position: fixed

　　可以简单说fixed是特殊版的absolute，fixed元素总是相对于视口定位的。

5、inherit
　　继承父元素的position属性，但需要注意的是IE8以及往前的版本都不支持inherit属性。
　　

五、overflow:hidden清除浮动的原理及BFC的原理

BFC的原理 ：参考：http://www.cnblogs.com/heimanba/p/3774086.html
http://www.cnblogs.com/qiye2016/p/5880121.html

对浮动的认识

参考：http://www.zhangxinxu.com/wordpress/2010/01/css-float%E6%B5%AE%E5%8A%A8%E7%9A%84%E6%B7%B1%E5%85%A5%E7%A0%94%E7%A9%B6%E3%80%81%E8%AF%A6%E8%A7%A3%E5%8F%8A%E6%8B%93%E5%B1%95%E4%B8%80/

浮动出现的意义其实只是用来让文字环绕图片而已，仅此而已。而我们目前用浮动实现页面布局本不是浮动该干的事情。

浮动元素没有高度，“你看，那图片实实在在就在那儿，怎么没有高度？没有高度为什么文字会绕行？”

然而，float无法等同于display:inline-block，其中原因之一就是浮动的方向性，display:inline-block仅仅一个水平排列方向，就是从左往右，而float可以从右往左排列，这就是两者的差异。然而，我们又有多少情况需要元素从右往左排列呢？很少，所以，CSS中，没有浮动这一属性不是什么大不了的事情，它其实就那么回事。

六、学习方法:
1.常去看一些博客和网站，比如：can i use 查看css属性兼容性,mdn查看知识点官方解释。伯乐在线，微信公众号，前端大全，前端早读课
2.技术书籍进行系统学习。
3.技术更新很快，跟上节奏，多关注出现的新技术。
4.github上看一下别人的开源项目，进行学习。
5.今日头条推荐一些关于前端文章，学习
6.好的习惯：定期看技术博客，比如张鑫旭，阮一峰，梦想天空，一像素，看前端大全
7.
七、css文本过长，使用哪个CSS属性处理？
八、js中将函数的参数即类数组对象转为数组的方法：1.使用ES6中的Array.from();2.使用ES6中的扩展运算符即三个点：… 3.ES5中使用 Array.prototype.slice.call(arguments);

扩展运算符：将一个数组转换为用逗号分隔的参数序列。
应用：1.替代数组的apply方法；2.类似数组的对象，任何类似数组的对象都可以使用扩展运算符转为真正的数组；比如 var nodeList = document.querySelectorAll(‘div’); var array=[…nodeList];

可参考：http://www.jb51.net/article/23332.htm
九、call,apply和bind的区别？
十、对ES6中promise的理解
十一、用数组实现一个栈

function Stack(){
  this.arr =[];
  this.top = 0;//栈顶位置
  this.push =push;//这么写:下面用户自己定义push方法,下面类似。这样实现，没有使用数组的API
  this.pop = pop;
  this.peek = peek;//栈顶元素
  this.clear = clear;
  this.length =length;
}
var stack = new Stack();
stack.arr.push();//入栈，返回栈中元素个数
stack.arr.**pop()**;//出栈，返回栈顶元素，然后数组长度减1。

push()和pop()是ES6专门提供的栈方法

数组实现一个队列

function Queue(){
  this.arr =[];
}
var queue= new Stack();
queue.arr.push();//向数组末尾添加元素
queue.arr.**shift()**;//移除数组的第一个项并返回该项，同时将数组长度减1。

push()和shift()是ES6专门提供的队列方法

注意：ES还提供了一个unshift()方法，与shift()用法相反，shift是删除元素，unshift在数组前面添加任意个项，并返回数组的长度。所以同时使用unshift()和pop()方法，可以从相反的方向模拟队列。即从数组前面添加项，从后面移除项。

记住四个方法的用法。
十二、对堆的理解
参考：http://blog.csdn.net/socho/article/details/51565498
堆是一种特殊的完全二叉树。
如上，所有父结点都比子结点要小，符合这样特点的完全二叉树我们称为小顶堆。反之，如果所有父结点都比子结点要大，这样的完全二叉树称为大顶堆。
实际用途：