Web front-end written test question bank CSS chapter
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!
#1. Q: Are CSS properties case-sensitive?
```
ul {
MaRGin: 10px;
}
```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 (
6、Q: In HTML text, pseudo-class Class:root always points to html element?
A: No (the answer given is ==||). The following is excerpted from Zhihu: Do root and html refer to the same element in CSS3? The answer:
refers only to the root created. This root may not be html , if it is fragment html and no root is created, it will be the root of the fragment. Enter the URL below into a browser that supports data URL (Firefox, Chrome, Safari, Opera) and you will see:
data:application/xhtml+xml,<div xmlns="http://www.w3.org/1999/xhtml"><style>:root { background: green; } html { background: red !important; }</style></div>7. Q: The translate() method can move an element between The position on the z-axis?
A: No. The translate() method can only change the displacement on the x-axis and y-axis.
8. Q: What is the color of the text "Sausage" in the following code?
<ul class="shopping-list" id="awesome">
<li><span>Milk</span></li>
<li class="favorite" id="must-buy"><span class="highlight">Sausage</span></li>
</ul>ul {color:red;}
li {color:blue;}A: blue.
9. Q: What is the color of the text "Sausage" in the following code?
<ul class="shopping-list" id="awesome">
<li><span>Milk</span></li>
<li class="favorite" id="must-buy"><span class="highlight">Sausage</span></li>
</ul>ul {color:red;}
#must-buy {color:blue;}A: blue.
10. Q: What is the color of the text "Sausage" in the following code?
<ul class="shopping-list" id="awesome">
<li><span>Milk</span></li>
<li class="favorite" id="must-buy"><span class="highlight">Sausage</span></li>
</ul>.shopping-list .favorite {
color: red;
}
#must-buy {
color: blue;
}A: blue.
11、Q: 如下代码中文本“Sausage”的颜色是?
<ul class="shopping-list" id="awesome">
<li><span>Milk</span></li>
<li class="favorite" id="must-buy"><span class="highlight">Sausage</span></li>
</ul>ul#awesome {
color: red;
}
ul.shopping-list li.favorite span {
color: blue;
}A: blue。
12、Q: 如下代码中文本“Sausage”的颜色是?
<ul class="shopping-list" id="awesome">
<li><span>Milk</span></li>
<li class="favorite" id="must-buy"><span class="highlight">Sausage</span></li>
</ul>ul#awesome #must-buy {
color: red;
}
.favorite span {
color: blue!important;
}A: blue。
13、Q: 如下代码中文本“Sausage”的颜色是?
<ul class="shopping-list" id="awesome">
<li><span>Milk</span></li>
<li class="favorite" id="must-buy"><span class="highlight">Sausage</span></li>
</ul>ul.shopping-list li .highlight {
color: red;
}
ul.shopping-list li .highlight:nth-of-type(odd) {
color: blue;
}A: blue。
14、Q: 如下代码中文本“Sausage”的颜色是?
<ul class="shopping-list" id="awesome">
<li><span>Milk</span></li>
<li class="favorite" id="must-buy"><span class="highlight">Sausage</span></li>
</ul>#awesome .favorite:not(#awesome) .highlight {
color: red;
}
#awesome .highlight:nth-of-type(1):nth-last-of-type(1) {
color: blue;
}A: blue。
15、Q:#example位置如何变化：
<p id="example">Hello</p>
#example {margin-bottom: -5px;}A: 向上移动5px。
16、Q: #example位置如何变化：
<p id="example">Hello</p>
#example {margin-left: -5px;}A: 向左移动5px。
17、#i-am-useless 会被浏览器加载吗？
<div id="test1">
<span id="test2"></span>
</div>#i-am-useless {background-image: url('mypic.jpg');}A: 不会
18、mypic.jpg 会被浏览器加载吗？
<div id="test1">
<span id="test2"></span>
</div>#test2 {
background-image: url('mypic.jpg');
display: none;
}A: 会被下载。
19、mypic.jpg 会被浏览器加载吗？
<div id="test1">
<span id="test2"></span>
</div>#test1 {
display: none;
}
#test2 {
background-image: url('mypic.jpg');
visibility: hidden;
}A: 不会被下载。
20、Q: only 选择器的作用是？
@media only screen and (max-width: 1024px) {argin: 0;}A：停止旧版本浏览器解析选择器的其余部分。
only 用来定某种特定的媒体类型，可以用来排除不支持媒体查询的浏览器。其实only很多时候是用来对那些不支持Media Query 但却支持Media Type 的设备隐藏样式表的。其主要有：支持媒体特性（Media Queries）的设备，正常调用样式，此时就当only 不存在；对于不支持媒体特性(Media Queries)但又支持媒体类型(Media Type)的设备，这样就会不读了样式，因为其先读only 而不是screen；另外不支持Media Qqueries 的浏览器，不论是否支持only，样式都不会被采用。
21、Q:overfloa:hidden 是否形成新的块级格式化上下文？
<div>
<p>I am floated</p>
<p>So am I</p>
</div>div {overflow: hidden;}
p {float: left;}A：会形成。
会触发BFC的条件有：
float的值不为none。
overflow的值不为visible。
display的值为table-cell, table-caption, inline-block 中的任何一个。
position的值不为relative 和static。
22、Q: screen关键词是指设备物理屏幕的大小还是指浏览器的视窗？
@media only screen and (max-width: 1024px) {margin: 0;}A: 浏览器视窗
（学习视频分享：css视频教程）
The above is the detailed content of Web front-end written test question bank CSS chapter. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
AI Hentai Generator
Generate AI Hentai for free.
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
1382
52
The Roles of HTML, CSS, and JavaScript: Core Responsibilities
Apr 08, 2025 pm 07:05 PM
HTML defines the web structure, CSS is responsible for style and layout, and JavaScript gives dynamic interaction. The three perform their duties in web development and jointly build a colorful website.
How to use bootstrap in vue
Apr 07, 2025 pm 11:33 PM
Using Bootstrap in Vue.js is divided into five steps: Install Bootstrap. Import Bootstrap in main.js. Use the Bootstrap component directly in the template. Optional: Custom style. Optional: Use plug-ins.
How to write split lines on bootstrap
Apr 07, 2025 pm 03:12 PM
There are two ways to create a Bootstrap split line: using the tag, which creates a horizontal split line. Use the CSS border property to create custom style split lines.
How to resize bootstrap
Apr 07, 2025 pm 03:18 PM
To adjust the size of elements in Bootstrap, you can use the dimension class, which includes: adjusting width: .col-, .w-, .mw-adjust height: .h-, .min-h-, .max-h-
How to set up the framework for bootstrap
Apr 07, 2025 pm 03:27 PM
To set up the Bootstrap framework, you need to follow these steps: 1. Reference the Bootstrap file via CDN; 2. Download and host the file on your own server; 3. Include the Bootstrap file in HTML; 4. Compile Sass/Less as needed; 5. Import a custom file (optional). Once setup is complete, you can use Bootstrap's grid systems, components, and styles to create responsive websites and applications.
How to insert pictures on bootstrap
Apr 07, 2025 pm 03:30 PM
There are several ways to insert images in Bootstrap: insert images directly, using the HTML img tag. With the Bootstrap image component, you can provide responsive images and more styles. Set the image size, use the img-fluid class to make the image adaptable. Set the border, using the img-bordered class. Set the rounded corners and use the img-rounded class. Set the shadow, use the shadow class. Resize and position the image, using CSS style. Using the background image, use the background-image CSS property.
How to view the date of bootstrap
Apr 07, 2025 pm 03:03 PM
Answer: You can use the date picker component of Bootstrap to view dates in the page. Steps: Introduce the Bootstrap framework. Create a date selector input box in HTML. Bootstrap will automatically add styles to the selector. Use JavaScript to get the selected date.
How to use bootstrap button
Apr 07, 2025 pm 03:09 PM
How to use the Bootstrap button? Introduce Bootstrap CSS to create button elements and add Bootstrap button class to add button text
