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!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
