1. Why should CSS styles be initialized?

A: Because of browser compatibility issues, the default values of some tags are different from browser to browser. If CSS is not initialized, the page display will be different from browser to browser.

Of course, initialization styles can have an impact on SEO, but you can’t have your cake and eat it, but try to initialize with minimal impact.

2. Floating elements cause problems?

A. The height of the parent element cannot be spread out, affecting elements of the same level as the parent element

B. Non-floating elements at the same level as floating elements follow

C. If the first element does not float, the element before it must float as well. Otherwise, the structure of the page will be affected

3, what is the difference between the three assignment methods? (with units, pure figures, percentages)?

Answer: with units: px does not count, em uses its parent element’s font size as a reference to calculate its own line height

Pure numbers: Pass the ratio to offspring, for example, if the parent line height is 1.5 and the child element font is 18px, then the child element line height is 1.5*18=27px

Percentage: Passes the calculated value to descendants

4, : Link, :visited, :hover, :active execution order is what?

答案 : l-v-h-a, L (link)ov(visited)e H (hover) A (active)te, namely love and hate two words to summarize

5. What does the CSS property Content do? What are the applications?

Answer: : The CONTENT property of CSS is specifically used on before/after pseudo-elements to insert generated content, which can be used with custom fonts to display special symbols.

6, text beyond display as ellipsis?

Answer: // Single line:

overflow: hidden;

text-overflow:ellipsis;

white-space: nowrap;

/ / multiple lines:

display: -webkit-box;

-webkit-box-orient: vertical;

-webkit-line-clamp: 3;

overflow: hidden;

7. What are the new form elements in HTML5?

答案 : datalist datetime output date month week time color number range email url

What is the principle behind creating a triangle with pure CSS?

Answer: First, you need to set the width and height of the element to 0. Then set the border style.

width: 0;

height: 0;

border-top: 40px solid transparent;

border-left: 40px solid transparent;

border-right: 40px solid transparent;

border-bottom: 40px solid #ff0000;

9. When can BFC be triggered?

Answer: The root element, which is HTML

Float is not none (default)

Overflow is not visible (default)

The display value is inline-block, table-cell, and table-caption

The value of position is absolute or fixed

10. What is the difference between the style tag written after and before the body?

Answer: Top down page loading is, of course, style loading first.

Since the browser parses the HTML document line by line, parsing to the style sheet written at the end (either inline or in the style tag) causes the browser to stop rendering, wait to load and re-render after parsing the style sheet. In IE on Windows, you can get FOUC (page flicker caused by style failure)