This is the fifth day of my participation in Gwen Challenge

CSS has always been the front-end developers more ignored modules, but also the back-end developers are more afraid of the place, in terms of the interview, the basic skills of a front-end developer is not fierce, ask the basic principle will know, not negligible CSS.

1. Compare the difference between block, inline, and inine-block.

(1) Features of block level elements:

The width, height, top and bottom margins of the element are controllable. Margin and padding are controllable. The width of the element is 100% of the parent element's width unless specified.Copy the code

(2) Inline elements:

2. The height, width, and top and bottom margins of the element cannot be set. Horizontal padding-left, padding-right, margin-left, margin-right all generate margin; Vertical padding-top, padding-bottom, margin-top, margin-bottom does not create margin effects 3. The width of the element is the width of the text or image it contains and cannot be changedCopy the code

(3) Inline block elements:

1, it has the characteristics of inline elements and block elements at the same time, and elements are displayed on the same line. 2, the width, height, top and bottom margins of elements can be controlled and modifiedCopy the code

Summary: Summary of commonly used block elements and inline elements

Block elements: div, p, h1... H6, OL,ul, DL, table, from, blockquote, address,hr Span, a, button, Textarea, SELECT, strong, small, lable,br, em, inline-block: img, inputCopy the code

2, Compare position,float, and static,relative,absolute

The CSS has three basic positioning mechanisms: document flow, floating, and absolute positioning. The three models are common flow model, floating model, and positioning model.

There are two general types of HTML elements: block-level elements and inline elements. Elements like div and P are block-level elements, and elements like SPAN and strong are inline elements. Block-level elements are arranged from top to bottom. By default, one block-level element occupies one row, followed by another. The elements in the row are arranged horizontally, from front to backCopy the code

(1) Position, float

Document flow: In CSS, there is a z-index attribute that determines the height of the page elements on the Z-axis. By default, all page elements are located at the z-index:0 layer. The elements in this layer are called document flow. Only float and position change the document flow to achieve different positions.

  • Float is a floating position. When set, the corresponding modules will leave the document flow and define the floating direction of the elements. The floating elements will generate a block-level box that is displayed side by side in a row. Sometimes you can use display:inline-block instead to achieve the same effect as float.
  • Position is to position an element in a variety of ways,

(2) Float and position properties

position: static

Is the default; all elements are static by defaultCopy the code

position: relative

Relative positioning, repositioning of the element relative to where it was in the normal document flow, still taking place in the document flow, not out of the document flow,Copy the code

position: absolute

Absolute positioning, according to a recent set up relative | the parent element of absolute positioning. If it had no set the parent of the position: relative | absolute positioning of elements, is based on fixing the root element.Copy the code

position:fixed

Leaving the document flow and fixing the element's position in the window, the display of the inline element becomes a block, overlaying the non-positioned element.Copy the code

float: left|right|none|both

Float element, smart float, cannot float vertically, completely out of the flow of the document, the element's display becomes a block, the float element's next element is arranged around the float element, so clearCopy the code

Conclusion; Setting position:relative and position: Absolute both float elements and alter the normal flow of the document. The difference is: Position :relative preserves its position at z-index:0. Left, top,right, and bottom are all relative to its position at z-index:0. And the position: absolute will completely from the document flow, no longer z – index: 0 layer reserved placeholder, left, top, right, bottom value is relative to their recently installed position: a relative | absolute ancestor element (parent), If none of the ancestor elements are set, then it is relative to the body element. Float can also change the document flow, the difference is that float won’t let float to another element, because it still make elements in z – index: 0 layer, only through float: left | right to control elements in the same layer left floating, floating right, changed the normal flow of documents, And it affects the surrounding and the next element. Position: Absolute and float both implicitly change the display type of the element to be inline-block. The length and width can be set. Position :relative does not implicitly change the display type.

3. Talk about browser rendering

1, DOM tree: the home page browser to obtain the HTML source parsing into a DOM tree, each tag(tag element) in HTML is a node in the DOM tree, its root node is the Document object, this DOM tree contains all HTML tags.

2. Style structure: The browser parses all the styles into style structures. In the process of parsing, the browser will remove the styles that are not recognized by the browser, for example, IE will remove the -moz style

3. Construction: Then the DOM tree and the style structure are combined to construct the Render tree. Different from the DOM tree, the Render Tree can recognize the style. Each node has its own style, and the browser can start drawing the page according to the render tree.

4. Layout: After the completion of the Render Tree construction, start the layout, recursively call from the root node, calculate the size and position of each element, accurately give the coordinates of each element,

5. Draw: After the layout is completed, traverse the render tree to draw and render elements of each node

4. What is backflow and redraw?

Backflow: changes in the size or position of elements, additions or deletions, changes in the contents of elements, and so on,

Causes the page layout to change, which triggers a relayout, causing the page to be rerendered, usually in step 4, relayout.

Redraw: A change in the style of an element, but with the same height, size, and position. That is, a change in style does not affect other elements. This usually happens in step 5, redraw

65. color, background-color, visibility

Characteristic; Backflow must cause redraw, redraw does not necessarily backflow, each page needs at least one backflow and redraw

5. How to reduce backflow and redraw?

1. Today’s browsers use queues to store multiple changes, batch execution to optimize the rearrangement process, and optimization to reduce the number of backflow and redraw and achieve optimization results

2. Code level:

  • Instead of changing style attributes one by one, it is better to change className directly, but className is a predefined style and is not dynamic. If you want to change some style dynamically, use cssText to change it
  • Display: None hides the element, performs all operations on it, and displays it. Operating on display: None does not cause redrawing.
  • Use visibility instead of display: None, because the former will only cause redraw, and the latter will cause backflow, changing the layout
  • Avoid frequent manipulation of styles, and avoid frequent manipulation of DOM with JS

6, ask you a few tips, how to make Chrome support text less than 12px?

font-size:12px; - its - transform: scale (0.8);Copy the code

7. What is the priority and weight of selectors in CSS?

Generic selector (*) < element (type) selector < class selector < attribute selector < pseudo-class < ID selector < inline style <! important ! Important infinite, highest priority. First class: represents the inline style, such as: style= "", weight is 1000. Second class: represents an ID selector, such as #content, with a weight of 100. Third class: represents classes, pseudo-classes, and attribute selectors, such as.content, with a weight of 10. Fourth class: represents type selectors and pseudo-element selectors, such as div P, with a weight of 1.Copy the code

Interviewer’s favorite question is, how do I center div horizontally and vertically?

Div {position: absolute; width:500px; height: 300px; top: 50%; left: 50%; margin: -150px 0 0 -250px; }} Position :absolute, set the distance between the top and left of the object to 50%, but if set to 50%, in fact, the box is not centered. Because when using: top: 50%; left: 50%; Transform div{position: absolute; transform div{position: absolute; width: 500px; height: 300px; top: 50%; left: 50%; transform: translate(-50%, -50%); } container{display: flex; container{display: flex; align-items: center; /* vertical center */ justify-content: center; /* Horizontal center */}. Container div{width: 100px; height: 100px; }Copy the code

9. Why clear the float? How to clear the float?

The purpose of clearing floats is to remove the effects of using float elements. The height of the floating elements will collapse, and the collapse of the height will make the layout at the back of our page not display properly, affecting the normal position of the following elementsCopy the code

The follow-up will continue to update, we often meet the interview summary