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; 是在处理兼容性问题 }

Principle: width or zoom: 1 must be defined, but cannot be defined at the same time height, use the overflow attribute to clear floats. One thing to note is that the overflow attribute has three attribute values: hidden, auto, and visible. We can use hidden and auto values ​​to clear floats, but remember not to use visible values. If this value is used, the effect of clearing floats will not be achieved.

Advantages: Simple, less code, good browser support Disadvantages: When using auto, when the internal width and height exceed the parent div, a scroll bar will appear, and when using hidden, it will be hidden

3. Principle of the after method: Use :after and :before to insert two element blocks inside element to achieve the effect of clearing floats. The implementation principle is similar to the clear:both method, except that:clear inserts a div.clear tag in HTML, while this method uses its pseudo-class clear:after to add an effect similar to div.clear inside the element.

Let’s take a look at its specific usage:

<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;}

where clear:both; refers to clearing all floats; content: '.'; display:block; for FF/chrome/opera/ IE8 cannot be missing, in which content() can have a value or be empty. The function of visibility:hidden; is to allow the browser to render it but not display it, so that the float can be cleared. So in general, it is recommended to use pseudo-class method.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Related reading:

2018 latest front-end interview questions ten

2018 latest front-end interview questions nine

2018 latest front-end interview questions eight

The above is the detailed content of 2018 latest front-end interview questions 11. For more information, please follow other related articles on the PHP Chinese website!