[Front-end interns prepare for autumn recruits] - Summary of HTML and CSS interview questions (2)

insert image description here

1. What are the ways to set the CSS style of a DOM?

External style sheet, importing an external css file
Internal style sheet, put the css code <head>inside the tag
Inline style, define the css style directly inside the HTML element

2. What are the selectors in CSS?

Derived selectors (declared with HTML tags)
id selector (declare with DOM ID)
class selector (declared with a style class name)
Attribute selector (declared with DOM attributes, belonging to CSS2, not supported by IE6, not commonly used, just don’t know if you don’t know)
Descendant selectors (using space spacing, such as div .a{ })
Group selectors (separated by commas, such as p,div,#a{ })

How is the priority of CSS selectors defined?

In general, the more specific a selector, the higher its priority. That is, the more accurately the selector points, the higher its priority.

Complicated calculation method:

Use 1 to indicate the priority of the derived selector
Use 10 to indicate the priority of the class selector
Use 100 to indicate the priority of the ID selector
div.test1 .span var Priority 1+10 +10 +1
span#xxx .songs li Priority 1+100 + 10 + 1
#xxx li Priority 100 +1

So here comes the question, look at the following code, `<p>`what color is the text in the label?

<style>
.classA{
    
     color:blue;}
.classB{
    
     color:red;}
</style>
<body>
<p class='classB classA'> 123 </p>
</body>

Answer: red. It is related to the order of the style definitions in the file, that is, the latter overrides the former, and <p class=’classB classA’>has nothing to do with the order in the file.

3. Which attributes can be defined in CSS so that a DOM element is not displayed in the browser's viewable range?

The most basic: set displaythe property to none, or tricky: set visibilitythe property tohidden
Tricks: Set the width and height to 0, set the transparency to 0, and set the z-index position to -1000em

4. What is the problem that the hover style does not appear after the hyperlink is visited? How to solve?

Answer: The clicked hyperlink style no longer has hover and active. The solution is to change the order of the CSS properties:L-V-H-A（link,visited,hover,active）

5. What is the specific difference between inline elements and block-level elements? Can the padding and margin of inline elements be set?

Block-level element (block) characteristics: always occupy a single line, showing that it starts on a new line, and the following elements must also be displayed on a new line; width (width), height (height), inner margin (padding) and outer edge The margin can be controlled;

Inline element (inline) features: on the same line as adjacent inline elements; width (width), height (height), top/bottom (padding-top/padding-bottom) of the inner margin and top of the outer margin /bottom (margin-top/margin-bottom) cannot be changed (that is, the
left and right of padding and margin can be set), which is the size of the text or picture inside.

So the question is, browsers still have default inline-block elements (with intrinsic size, height and width can be set, but will not wrap automatically), what are they?

Answer: <input> 、<img> 、<button> 、<texterea> 、<label>.

6. What is margin overlap? What is the result of the overlap?

Margin overlap ismargin-collapse .

In CSS, the margins of two adjacent boxes (which may be siblings or ancestors) can be combined into a single margin. This way of combining margins is called collapsing, and the combined margins are thus called collapsing margins.

The folding result follows the following calculation rules:

when two adjacent margins are both positive, the folding result is the larger value between them.

When two adjacent margins are both negative, the folding result is the larger value of the two absolute values.

When the two margins are positive and negative, the folding result is the sum of the two.

7. What is the difference between the transparency effect of rgba() and opacity?

Both rgba() and opacity can achieve transparency, but the biggest difference is that opacity acts on the element and the transparency of all content within the element.
And rgba() only acts on the color of the element or its background color. (Child elements of elements that set rgba transparency will not inherit the transparency effect!)

8. What are the two properties in css that allow text to overlap vertically and horizontally?

Vertical direction: line-height
Horizontal direction: letter-spacing

So here comes the question, do you know what are the magical effects of letter-spacing?

Answer: It can be used to eliminate the problem of newline space gaps between inline-block elements.

9. How to vertically center a floating element?

// 方法一：已知元素的高宽
#div1{
    
    
background-color:#6699FF;
width:200px;
height:200px;
position: absolute; //父元素需要相对定位
top: 50%;
left: 50%;
margin-top:-100px ; //二分之一的 height，width
margin-left: -100px;
}

//方法二:未知元素的高宽
#div1{
    
    
width: 200px;
height: 200px;
background-color: #6699FF;
margin:auto;
position: absolute; //父元素需要相对定位
left: 0;
top: 0;
right: 0;
bottom: 0;
}

10. So here comes the question, how to center one vertically? (In a simpler way.)

#container //<img>的容器设置如下
{
    
    
display:table-cell;
text-align:center;
vertical-align:middle;
}

11. The difference between px and em

Both px and em are length units. The difference is that the value of px is fixed, and it is as much as you specify, and it is easier to calculate. The value of em is not fixed, and em will inherit the font size of the parent element.

The browser's default font height is 16px. So unadjusted browsers all conform to: 1em=16px. then 12px=0.75em, 10px=0.625em.

12. Describe a "reset" CSS file and how to use it. Know normalize.css? Do you understand their differences?

There are so many reset styles, any front-end developer must have a common reset CSS file and know how to use them. Are they doing it blindly or do they know why? The reason is that different browsers have different default styles for some elements. If you don't handle it, there will be necessary risks in different browsers, or more dramatic things will happen.

You may use Normalize instead of your reset style file. It doesn't reset all styles, but only provides a reasonable set of default style values. Makes it consistent and reasonable across browsers without disrupting other things (such as bold headings).

In this regard, it is impossible to do every reset reset. It also does somewhat more than a reset, and it handles quirks you never have to think about, like inconsistent audio elements in HTML or inconsistent line-heights.

13. What are Sass and LESS? Why is everyone using them?

They are CSS preprocessors. He is an abstraction layer on top of CSS. They are compiled into CSS with a special syntax/language.

For example, Less is a dynamic style language. It endows CSS with the characteristics of dynamic languages, such as variables, inheritance, operations, and functions. LESS can run on the client (supporting IE 6+, Webkit, Firefox), or on a The server runs (with Node.js).

Why use them?

The structure is clear and easy to expand.
It is convenient to shield browser private syntax differences. Needless to say, this encapsulates repeated processing of browser syntax differences and reduces meaningless mechanical labor.
Multiple inheritance can be easily implemented
Fully compatible with CSS code, it can be easily applied to old projects. LESS just extends the CSS syntax, so old CSS code can also be compiled with LESS code.

14. What is the difference between display:none and visibility:hidden?

display : hides the corresponding element but does not occupy the original space of the element.
visibility: Hide the corresponding element and occupy the original space of the element.

That is: CSS display:noneafter using the attribute, the width, height and other attribute values of the HTML element (object) will be "lost"; and after using the attribute visibility:hidden, HTMLthe element (object) is only visually invisible (completely transparent), and its The occupied spatial position still exists.

15. The difference between link and @import in CSS is:

Link is an html tag, and @import is provided in CSS. When the page loads, the link will be loaded at the same time, and the CSS referenced by @import will not load the referenced CSS until the page is loaded.
@import can only be recognized on ie5 or above, and link is an html tag, so there is no browser compatibility problem. The weight of the style introduced by Link is greater than that of @import (@import is to import the referenced style into the current page)

16. Introduction box model:

First, let's understand the basic concept of the CSS box model: The
CSS box model is essentially a box that encapsulates the surrounding HTML elements, including: margins, borders, padding, and actual content. The box model allows us to place elements in the space between other elements and the borders of surrounding elements. Two kinds of box-type standard box models and IE box models

Box size:

Box width = content width + left padding + right padding + left border + right border + left margin + right margin
Box height = content height + top padding + bottom padding + top border + bottom border + top margin + bottom margin

The difference between the standard box model and the IE box model

Standard box model: width = content
insert image description here
IE box model: width = content + padding + border

How does css set these two models

Through the box-sizing property in css

Standard box model: content-box
IE box model: border-box

17. Why initialize the style?

Due to browser compatibility issues, different browsers have different default style values for tags. If it is not initialized, it will cause display differences between different browsers, but initializing CSS will have a small impact on search engine optimization.

18. What is BFC?

BFC (block-level formatting context), a box that creates a new BFC is independently laid out, and the layout of elements inside the box does not affect elements outside the box. Two adjacent boxes in the same BFC have a margin overlapping problem in the vertical direction.

BFC means that an independent rendering area is created in the browser. The layout of all elements in this area will not affect the layout of elements outside the area. This rendering area only works on block-level elements.

19. What is html semantics?

When the page style fails to load, it can make the page present a clear structure
Conducive to SEO optimization, conducive to being indexed by search engines (more convenient for search engine crawlers to identify)
It is convenient for project development and maintenance, making the html code more readable and easy for other devices to parse.

20. What is the function of Doctype? What is the difference between strict mode and promiscuous mode?

<!DOCTYPE>Used to tell the browser in what mode to render the document

In strict mode: page layout and JS parsing are executed with the highest standard supported by the browser

Promiscuous mode: not strictly in accordance with the standard, mainly used for compatibility with old browsers, backward compatibility