👀 front end questions appetizer

I have been working for the new company for several days. I wanted to sort it out two days before I joined the company. As a result, the orientation was delayed for two days, and then I had to debug the development environment.

Here are some of the most frequently asked questions in a job interview.

• Unknown width and height, how is an element centered horizontally and vertically
• Redraw and reflow
• Talk about understanding the box model

Unknown width and height, how is an element centered horizontally and vertically

🚩 Flex layout

Position in the center of the implementation will not say, with flex implementation code is as follows:

 .parent {
     display: flex;
     justify-content: center;
     align-items: center;
  }
Copy the code

🚩 the interviewer also asked flex:1, which attribute is short for?

• flex-grow

Defines the project zoom scale, which defaults to 0. If all projects have a flex-Grow value of 1, they divide the remaining space equally.

.item{
    flex-grow:<number> /*default 0*/
 }
Copy the code

If item2 is set to 2 and the rest to 1, the effect is as follows:

• flex-shrink

Defines the scale by which the project shrinks. The default is 1, that is, the project shrinks if there is not enough space.

If all projects have a Flex-shrink attribute of 1, they are scaled down when space is insufficient. If set to 0 and the others to 1, the former will not shrink when space is insufficient.

.item{
    flex-shrink:<number>  /*default 1*/
 }
Copy the code

• flex-basis

The default value is auto, which is the original size of the project. The specific value can be set to indicate that the project occupies a fixed space.

.item{
    flex-basis:<lenght>|auto  /*default auto*/
 }
Copy the code

Redraw and reflow

Let’s take a look at the browser rendering mechanism

• Browsers use Flow Based Layout
• Parsing the HTML generates a DOM tree
• Parsing CSS generates a CSSDOM rule tree
• Add DOM Tree +CSSDOM rule Tree to generate Render Tree
• Start the layout by taking each node through the rendering tree and calculate the unknown size information of each node
• Draws each node of the render tree to the screen

Repaint

When we manipulate elements on nodes that do not cause their positions to change, the browser assigns new styles to those nodes, a process we call redrawing.

color,blackground-color,visibility

Reflux (Reflow)

The page rendering is iterated through the Render Tree, the nodes change, and the browser rerenders some nodes or all of the document, a process we call backflow

• Page first render
• The browser window size changed. Procedure
• The size or position of the element changed
• Element content changes (number of words or image size)
• Element font size changes
• Add or remove visible DOM elements
• Activate CSS pseudo-classes (such as hover)

Avoid redrawing and reflow

• Avoid table layouts
• Change the class at the very end of the DOM tree whenever possible
• Avoid setting multiple inline styles
• The Jiang Donghua effect applies to elements whose position attribute is absolute or fixed
• Avoid USING CSS expressions
• To avoid frequent manipulation of styles, define calssName and change calssName once
• Set display: None to the element first, and then display it after the overnight operation. Because dom manipulation on an element with an attribute of None does not cause backflow and redraw.
• Avoid frequently reading properties that cause backflow/redraw, and cache them in a variable if they are used more than once.
• Use absolute positioning on elements with complex animations to keep them out of the document stream, which would otherwise cause frequent backflow of parent elements and subsequent elements.

Talk about understanding the box model

All HTML elements can be considered boxes, and there are two types of box models, the Standard model and the IE model (weird boxes).

🚩 I thought this was over, but the interviewer then asked, what do you understand about BFC? ⚡ ️ ⚡ ️ ⚡ ️

BFC

Block-level formatting context, separate layout areas, and elements inside the BFC are not affected by the outside.

Conditions for the formation of BFC

• Float the none
• Position is absolute or fixed
• Overflow is not visible
• Display: inline-block, table-cell, table-caption, flex, inline-flex

Landing the features

• The upper and lower margins of two adjacent containers belonging to the same BFC will overlap
• When calculating the height of the BFC, the floating element is also involved
• The BFC region does not overlap with the floating container

BFC article reference: www.cnblogs.com/qs-cnblogs/…

During the interview, I realized that many details were messy, so it was necessary to take notes.

If there are any mistakes in the above notes, please correct them!