简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > Web Front-end > CSS Tutorial > body text

Web front-end written test question bank CSS chapter

WBOY
Release： 2022-04-21 14:39:25
forward
3530 people have browsed it

In the previous article "Web Front-end Written Test Question Bank - HTML Chapter", we shared some front-end interview questions about HTML. The following article follows the previous one and shares the written test questions (with answers) for the CSS part. Let’s see how many of them you can answer correctly!

Web front-end written test question bank CSS chapter

#1. Q: Are CSS properties case-sensitive? 

 ```
 ul {
     MaRGin: 10px;
 }
 ```
Copy after login

A: No distinction. HTML and CSS are not case-sensitive, but for better readability and team collaboration, they are generally lowercase. In XHTML, element names and attributes must be lowercase.

2. Q: Does setting margin-top and margin-bottom on inline elements work?

A: Doesn't work. (The answer is that it works, but I personally think it is wrong.) The elements in

html are divided into replaced elements and non-replaced elements.

  • A replacement element is an element that is used as a placeholder for other content. The most typical one is img, which just points to an image file. And most form elements are also replaced, such as input, etc.

  • Non-replacement elements refer to elements whose content is included in the document. For example, a paragraph is a non-replaced element if its text content is placed within the element itself.

To discuss whether margin-top and margin-bottom work on inline elements, we need to discuss inline replacement elements and inline non-replacement elements separately.

First of all, we should make it clear that margins can be applied to inline elements. It is allowed in the specification. However, since margins are applied to an inline non-replaced element, it has no effect on line-height. Since the margins are actually transparent. So there is no visual effect on the declaration of margin-top and margin-bottom. The reason is that the margins of inline non-replaced elements do not change the line height of an element. This is not the case for the left and right margins of inline non-replaced elements, which has an impact.

The margins set for the replaced element will affect the line height, which may increase or decrease the line height, depending on the value of the upper and lower margins. The left and right margins of an inline replaced element have the same effect as the left and right margins of a non-replaced element. Let’s take a look at the demo:

http://codepen.io/paddingme/pen/JwCDF

3. Q: Is it possible to set padding-top and padding-bottom for inline elements? Will it increase its height?

（Original question is Does setting padding-top and padding-bottom on an inline element add to its dimensions?）

A: The answer is no. I'm a bit confused about the same question. I don't quite understand what the dimensions here mean. Put it aside and let’s analyze it. For inline elements, set the left and right padding, and the left and right padding will be visible. When setting the top and bottom padding, you can see that the padding area increases after setting the background color. For inline non-replaced elements, the row height will not be affected and the parent element will not be stretched. For replaced elements, the parent element is expanded. Take a look at the demo for a better understanding:

http://codepen.io/paddingme/pen/CnFpa

4. Q: Set the font-size of p: 10rem , will the text size change when the user resets or drags the browser window?

A: No.

rem is a relative unit of measurement based on the size of font-size in the HTML root element. The size of the text will not change as the size of the window changes.

5. Q: Pseudo-class selector: checked will act on input types of radio or checkbox, and will not act on options.

A: No.

The definition of checked pseudo-class selector is obvious:

The :checked CSS pseudo-class selector represents any radio (), checkbox () or option (