Front-end interview questions (HTML & CSS)

About HTML

Briefly describe your understanding of HTML semantics?

• In the absence of CSS, the page can also present the content structure and code structure
• User experience: For example, title and alt are used to explain nouns
• Conducive to SEO: Conducive to being indexed by search engines, and easier for search engine crawlers to identify
• Render web pages in a meaningful way for other devices to interpret (e.g. screen readers, blind readers, mobile devices)
• Facilitate project development and maintenance, making HTML code more readable

The difference between href and src

1.href: hypertext reference

        Point to some network resources, and establish a link relationship with the current element or this document.

        When loading it, the processing of the current document will not be stopped, and the browser will continue to go down.

        Commonly used in labels such as a and link.

2.src: Resource reference

        The pointed-to content is embedded where the current tab is.

        When the browser parses src, it will stop processing subsequent documents until the content of src is loaded.

        Commonly used in script and img tags

        js file is placed at the end of the HTML document. If the js file is placed in the head tag, you can use window.onload to achieve the final loading of js

After the browser gets the domain name from the server to the html file through network communication, how to render the page?

1. Construct DOM tree and CSSOM tree according to html file. During the construction of the DOM tree, if JS is encountered, the construction of the DOM tree and CSSOM tree will be blocked, and the JS file will be loaded first. After loading, continue to build the DOM tree and CSSOM tree. (The reason for loading js files first: to prevent the DOM and CSSOM trees from being redrawn by JS after loading)

2. Build a rendering tree (Render Tree).

3. Page repaint (repaint) and rearrangement (reflow, also known as reflow). After the page rendering is completed, if the JS operates the DOM node, the browser will redraw or rearrange the page according to the size of the JS operation on the DOM.

What are repaints and reflows?

Redrawing: The style of the element changes, but it does not affect the spatial position and size of the node in the page. If the background color, font color, etc. of a div label node change without affecting other elements and the overall layout, this process is called repainting.

Reflow: Elements are added, deleted, or modify the spatial position and size of elements (such as width, height, inner margin, outer margin, or float, position, display: none; etc.), causing the browser to re-render The entire DOM tree.

Cons: consumes DOM and browser performance

Contrast: reflow consumes more performance than redrawing

Note: Reflow must redraw, but redraw does not necessarily reflow. (Reflow re-renders DOM tree and styles, redraw only draws styles)

Reflow is required when page layout and geometry properties change. Browser rearrangement occurs when:

• Add or remove visible DOM elements;
• Element position changes - display, float, position, overflow, etc.;
• Element size changes - margins, padding, borders, width and height
• Content changes—such as changes in the width and height of calculated values ​​caused by text changes or image size changes;
• Page rendering initialization;
• The size of the browser window changes - when the resize event occurs;

About CSS

CSS selector priority

!important > Inline Styles > ID Selectors > Class Selectors (Attribute Selectors, Pseudo-Class Selectors) > Element Selectors (Pseudo-Element Selectors) > Wildcard Selectors 

CSS margin overlap problem

• there will be overlap
  •  The outer margins are all positive numbers, and the largest outer margin will be selected as the interval in the vertical direction
  • One positive and one negative, spacing = positive - |negative|
  • two negative, spacing = 0 - the one with the largest absolute value
• no overlap
  • Set display: the box of inline-block does not
  • position: absolute

What are the different types of web page layouts?

• Static layout: arrange according to the layout of the code;
• Adaptive layout: the position of the element will change but the size will not;
• Fluid layout: The size of the element will change but the position will not change - the screen will be too large or too small to cause the element to be displayed normally.
• Responsive layout: Each screen resolution will have a layout style, while the position will change and the size will change.

The meaning of the position attribute and value

• relative: Generates a relatively positioned element, positioned relative to its normal position.
• absolute: Generates absolutely positioned elements, positioned relative to the first parent element other than static positioning.
• fixed: Generates absolutely positioned elements, positioned relative to the browser window.
• static: the default value. Without positioning, the element appears in normal flow

When does display:inline-block not show gaps?

• Place child elements on the same line
• Set font-size: 0 in the parent element, reset the correct font-size on the child element
• Add style float:left to inline-block elements
• Set the child element margin value to a negative number
• Set the parent element, display: table and word-spacing

What is your understanding of BFC?

The block-level formatting context is an independent rendering area.

Create BFC

1. body root element
2. Set float, the value of float is left or right
3. set targeting

• • position is not static or relative
  • is absoulte or fixed

1. The value of display is inline-block
2. set overflow

• • The value of overflow is not visible
  • is hidden, auto, scroll

1. table cell, table-cell
2. elastic layout, flex

Use BFC to solve problems

1. Solve the collapse problem of the outer margin (vertical collapse)
2. Use BFC to solve containment collapse
3. Clear the effect of floating
4. BFC can prevent standard flow elements from being covered by floating elements

Thanks momoko♥~~~