2018最新前端面试题十一

这次给大家带来2018最新前端面试题，我们知道在前端工作中面试是必不可少的一部分，这次的前端面试常考问题分类整理汇总就是来帮助大家度过前端面试着一大难关。一起来看一下。

【相关推荐：前端面试题（2020）】

一、描述z-index和叠加上下文是如何形成的。

首先来看在CSS中叠加上下文形成的原因：

1.负边距 margin为负值时元素会依参考线向外偏移。margin-left/margin-top的参考线为左边的元素/上面的元素（如无兄弟元素则为父元素的左内侧/上内侧）,margin-right和margin-bottom的参考线为元素本身的border右侧/border下侧。一般可以利用负边距来就行布局，但没有计算好的话就可能造成元素重叠。堆叠顺序由元素在文档中的先后位置决定，后出现的会在上面。

2.position的relative/absolute/fixed定位 当为元素设置position值为relative/absolute/fixed后，元素发生的偏移可能产生重叠，且z-index属性被激活。z-index值可以控制定位元素在垂直于显示屏方向（Z 轴）上的堆叠顺序（stack order），值大的元素发生重叠时会在值小的元素上面。

z-index属性 z-index只能在position属性值为relative或absolute或fixed的元素上有效。

基本原理：z-index值可以控制定位元素在垂直于显示屏方向（Z 轴）上的堆叠顺序（stack order），值大的元素发生重叠时会在值小的元素上面。

使用相对性：z-index值只决定同一父元素中的同级子元素的堆叠顺序。父元素的z-index值（如果有）为子元素定义了堆叠顺序（css版堆叠“拼爹”）。

向上追溯找不到含有z-index值的父元素的情况下，则可以视为自由的z-index元素，它可以与父元素的同级兄弟定位元素或其他自由的定位元素来比较z-index的值，决定其堆叠顺序。同级元素的z-index值如果相同，则堆叠顺序由元素在文档中的先后位置决定，后出现的会在上面。所以如果当你发现一个z-index值较大的元素被值较小的元素遮挡了，请先检查它们之间的dom结点关系，多半是因为其父结点含有激活并设置了z-index值的position定位元素。

二、请描述 BFC(Block Formatting Context) 及其如何工作。

BFC（Block Formatting Context）直译为“块级格式化范围”。

三、列举不同的清除浮动的技巧，并指出它们各自适用的使用场景。

首先来说明为什么要清除浮动？ 当一个容器中的元素全部浮动之后，由于浮动会让元素脱离普通文档流，所以对于外面的这个容器来讲它就没有内容将它撑开，背景设置无法显示，margin设置无法显示。 清除浮动的方法：

 1、添加新的元素 、应用 clear：both；

例如： <div class="outer"> <div class="div1">1</div> <div class="div2">2</div> <div class="div3">3</div> <div class="clear"></div> </div>
.clear{clear:both; height: 0; line-height: 0; font-size: 0}

优点：简单，代码少，浏览器支持好，不容易出现怪问题 缺点是要增加很多无效布局，但这是清除浮动用的比较多的一种方法。

2、父级div定义overflow：auto或者hidden

//这里添加了一个class <div class="div1">1</div> <div class="div2">2</div> <div class="div3">3</div> </div>
.over-flow{ overflow: auto; zoom: 1; //zoom: 1; 是在处理兼容性问题 }

<div class="outer"> <div class="div1">1</div> <div class="div2">2</div> <div class="div3">3</div> </div>
.outer {zoom:1;} /==for IE6/7 Maxthon2==/ .outer :after {clear:both;content:’.’;display:block;width: 0;height: 0;visibility:hidden;}