Shulou(Shulou.com)06/01 Report--

This article mainly introduces the relevant knowledge of the CSS interview questions, the content is detailed and easy to understand, the operation is simple and fast, and it has a certain reference value. I believe you will gain something after reading this CSS interview questions. Let's take a look at it.

1. In the css selector, the correct priority is ()

A, id selector > tag selector > class selector

B, tag selector > class selector > id selector

C, class selector > tag selector > id selector

D, id selector > class selector > tag selector

The four levels are defined as follows:

First class: represents inline style, such as style= "", with a weight of 1000

Second class: represents an ID selector, such as # content, with a weight of 100

Third: representative classes, pseudo classes and attribute selectors, such as .content, with a weight of 10

Fourth: represents type selector and pseudo-element selector, such as div p, with a weight of 1

two。 Which of the following defined css has the lowest weight? ()

A 、 # game .name

B 、 # game .name span

C 、 # game div

D 、 # game div.name

The greater the weight, the higher the priority.

CSS selector priority refers to the priority of the underlying selector:

ID `> `CLASS` > `ELEMENT` >` * 3. Which of the following statements is true about HTML semantics? ()

A. Semantic HTML is good for machine reading, such as PDA handheld devices and search engine crawlers, but not for human reading.

B and Table are outdated tags. When you encounter a data list, you should try to use div to simulate the table.

C. Semantics is a new concept brought by HTML5. Previous versions of HTML can not achieve semantics.

D, header, article and address all belong to semantic explicit tags.

Parsing:

Select D

1. What is HTML semantics?

According to the structure of the content (content semantics), choose the appropriate tag (code semantics) to facilitate developers to read and write more elegant code while allowing browser crawlers and machines to parse well.

2. Why should it be semantic?

In order to present a good content structure and code structure without CSS

User experience: for example, title, alt are used to explain nouns or explain picture information, the active use of label tags

Good for SEO: establish good communication with search engines and help crawlers capture more effective information:

Crawlers rely on tags to determine the weight of context and keywords; it is convenient for other devices to parse (such as screen readers, blind readers, mobile devices) to render web pages in a meaningful way

It is convenient for the team to develop and maintain, and the semantics is more readable, which is the important trend of the web page in the next step. teams that follow the W3C standard all follow this standard, which can reduce differentiation.

4. CSS style, which of the following elements can achieve the maximum width, with a line break before and after each? ()

A 、 Block Element

B 、 Square Element

C 、 Side Element

D 、 Box Element

Parsing:

Choose A

Block level element block element

Inline element inline element

Inline block element inline-block element

5. Which part of the JavaScripts placed in HTML will be executed when the page is loaded? ()

A, file header location

B, end of file

C, label part

D, label part

Parsing:

Select D

The JavaScripts in the head section is executed only when it is called.

The JavaScripts in the body section is executed when the page is loaded.

6. the following statements are correct: ()

The spatial position occupied by An and visibility:hidden; still exists, which is only visually completely transparent.

B, display:none; do not reserve their physical space for hidden objects

There is no essential difference between C, visibility:hidden; and display:none;.

D, visibility:hidden; produce reflow and repaint (reflow and redraw)

Select An and B

Visiblity: you can't see it, you can touch it.

Display: can't see, can't touch.

Display is dom level and can be rendered and redrawn.

Visiblity is not dom level and cannot be redrawn. It can only be rendered.

7. When a new window opens a web page, which of the following values is used ()

A 、 _ self

B 、 _ blank

C 、 _ top

D 、 _ parent

Parsing:

Select B

Open a link through the tag in html, through the target of the tag

Property specifies where to open the linked document.

If you write the target attribute in the tag, the browser will open a frame or window that matches its name or name according to the value of the target attribute.

There are also four reserved property values in target as follows

_ black: open the linked document in a new window

_ self: default. Open the linked document in the same frame

_ parent: open the linked document in the parent frame

_ top: opens the linked document in the entire window

Framename: opens the linked document in the specified frame

8. The following statement is wrong ()

A. the elements after setting display:none will only cause the browser to rearrange but not redraw

B. the elements after setting visibility:hidde will only cause the browser to redraw and not rearrange.

C, after setting the element opacity:0, you can also trigger the click event

Elements of D and visibility:hidden cannot trigger their click events.

Parsing:

Choose A

The element after setting display:none will cause the browser to rearrange and redraw.

9. The hover style does not appear after the hyperlink visit, and the hyperlink style that has been clicked and accessed no longer has hover and active. The solution is to change the order of CSS attributes. ()

A 、 a:link {} a:visited {} a:hover {} a:active {}

B 、 a:visited {} a:link {} a:hover {} a:active {}

C 、 a:active {} a:link {} a:hover {} a:visited {}

D 、 a:link {} a:active {} a:hover {} a:visited {}

Parsing:

Choose A

A: link`; `a: visited`; `a: hover`; `a:active

A:hover must be placed after a:link and a:visited

A:active must be placed after a:hover.

10. With regard to position positioning, the following statement is wrong ()

A, fixed element, which can be positioned relative to the specified coordinates of the browser window, which is always based on body

B, relative elements are offset based on their original position, and after they are moved, the original position no longer occupies space.

C, absolute element, if its parent container sets the position attribute, and the position attribute value is absolute or relative, then it will be offset according to the parent container.

Elements of D and fixed attributes do not occupy a place in the standard stream

Parsing:

Select B

Absolute: an element that generates absolute positioning and is positioned relative to the first parent element other than static positioning. The location of the element is specified by left, top, right, and bottom attributes. Fixed:

The absolute positioning element is generated and positioned relative to the browser window. The location of the element is specified by the left, top, right, and bottom attributes relative:

The element that is relatively positioned is generated and positioned relative to its normal position, so left:20 adds a 20-pixel static to the element's LEFT position:

Default value, no positioning, element appears in the normal flow (ignoring top,bottom,left,right or z-index declaration) inherit:

Specifies that the value of the position attribute should be inherited from the parent element

11. Which attributes in css can be inherited ()

A 、 font-size

B 、 color

C 、 font-family

D 、 border

Parsing:

Select A, B, C

Margin padding border display cannot inherit

12. What is the role of clear in css? ()

A. clear all styles of the element

B. clear all styles of the parent element of the element

C, indicating that floating elements cannot appear around the element

D, indicating that a floating element cannot appear around the parent element of the element

Parsing:

Select C

Clear`: `none` | `left` | `right` | `clear` is the end of the article on "what are the interview questions for CSS" in both. Thank you for reading! I believe you all have a certain understanding of the knowledge of "what are the interview questions of CSS". If you want to learn more knowledge, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.