2018 latest front-end interview questions 11

This time we bring you the latest front-end interview questions in 2018. We know that interviews are an essential part of front-end work. This time, the common front-end interview questions are sorted and summarized to help you get through the front-end interview. Big trouble. Let’s take a look.

[Related recommendations: Front-end interview questions (2020)]

1. Describe how z-index and overlay context are formed.

First let’s look at the reasons for the formation of overlay context in CSS:

1. Negative margin When the margin is a negative value, the element will be offset outward according to the reference line. margin-left/The reference line of margin-top is the element on the left/the element above (if there is no sibling element, it is the left inner/upper inner side of the parent element), margin-right The reference line with margin-bottom is the right side of the border/the lower side of the border of the element itself. Generally, negative margins can be used for layout, but if not calculated properly, elements may overlap. The stacking order is determined by the position of the elements in the document, with elements appearing later on top.

2. Relative/absolute/fixed positioning of position When the position value is set to relative/absolute/fixed for an element, the offset of the element may overlap, and the z-index attribute is activated. The z-index value can control the stacking order of positioned elements in the direction perpendicular to the display screen (Z axis). When elements with a large value overlap, they will be on top of elements with a small value.

z-index attribute z-index is only valid on elements whose position attribute value is relative, absolute, or fixed.

Basic principle: The z-index value can control the stacking order (stack order) of positioned elements in the direction perpendicular to the display screen (Z axis). When elements with a large value overlap, they will be on top of elements with a small value. .

Use relativity: The z-index value only determines the stacking order of sibling child elements in the same parent element. The z-index value of the parent element (if any) defines the stacking order for the child elements (the CSS version of stacking "Pin Dad").

If the parent element containing the z-index value cannot be found when tracing upward, it can be regarded as a free z-index element. It can position the element with the sibling brothers of the parent element or other free positions. Elements are compared with their z-index values ​​to determine their stacking order. If the z-index values ​​of sibling elements are the same, the stacking order is determined by the position of the elements in the document, with the elements appearing later being on top. So if you find that an element with a larger z-index value is obscured by an element with a smaller value, please first check the relationship between the dom nodes between them. It is probably because its parent node has activation and z-index set. The position of the value positions the element.

2. Please describe BFC (Block Formatting Context) and how it works.

BFC (Block Formatting Context) literally translates as "block-level formatting range".

3. List different techniques for clearing floating , and point out their applicable usage scenarios.

First of all, let’s explain why we need to clear floats? When all the elements in a container are floated, since floating will separate the elements from the ordinary document flow, there will be no content to hold it open for the outer container. The background settings cannot be displayed, and the margin settings cannot be displayed. Method of clearing floats:

1. Add new elements and apply 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}

Advantages: simple, less code, good browser support, not prone to strange problems. Disadvantages are: A lot of invalid layouts are added, but this is a more commonly used method to clear floats.

2. Parent div definition overflow: auto or 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;}