前端面试题（CSS部分）

时间 2019-11-06

标签端面试题 css 部分栏目 CSS 繁體版

原文原文链接

CSS 部分问题与解答

这里是 Front End Web Development Quiz 中的 CSS部分问题与解答.html

Q: CSS 属性是否区分大小写？git
```
```
 ul {
     MaRGin: 10px;
 }
 ```
复制代码
```
A: 不区分。 HTML，CSS都对大小写不敏感，但为了更好的可读性和团队协做通常都小写，而在XHTML 中元素名称和属性是必须小写的。github
Q: 行内(inline)元素设置margin-top和margin-bottom 是否起做用？shell

A: 不起做用。(答案是起做用，我的以为不对。)浏览器

html 里的元素分为替换元素（replaced element）和非替换元素（non-replaced element）。bash
- 替换元素是指用做为其余内容占位符的一个元素。最典型的就是img，它只是指向一个图像文件。以及大多数表单元素也是替换，例如input等。
- 非替换元素是指内容包含在文档中的元素。例如，若是一个段落的文本内容都放在该元素自己以内，则这个段落就是一个非替换元素。
讨论margin-top和margin-bottom对行内元素是否起做用，则要对行内替换元素和行内非替换元素分别讨论。app

首先咱们应该明确外边距能够应用到行内元素，规范中是容许的，不过因为在向一个行内非替换元素应用外边距，对行高(line-height)没有任何影响。因为外边距其实是透明的。因此对声明margin-top和margin-bottom没有任何视觉效果。其缘由就在于行内非替换元素的外边距不会改变一个元素的行高。而对于行内非替换元素的左右边距则不是这样，是有影响的。less

而为替换元素设置的外边距会影响行高，可能会使行高增长或减小，这取决于上下外边距的值。行内替换元素的左右边距与非替换元素的左右边距的做用同样。来看看demo:dom

codepen.io/paddingme/p…
Q: 对内联元素设置padding-top和padding-bottom是否会增长它的高度？（原题是Does setting padding-top and padding-bottom on an inline element add to its dimensions?）

A: 答案是不会。同上题比较纠结，不太明白这里的 dimensions指的是究竟是什么意思？放置一边，我们来分析下。对于行内元素，设置左右内边距，左右内边距将是可见的。而设置上下内边距，设置背景颜色后能够看见内边距区域有增长，对于行内非替换元素，不会影响其行高，不会撑开父元素。而对于替换元素，则撑开了父元素。看下demo，更好的理解下：

codepen.io/paddingme/p…
Q: 设置p的font-size:10rem，当用户重置或拖曳浏览器窗口时，文本大小是否会也随着变化？

A: 不会。

rem是以html根元素中font-size的大小为基准的相对度量单位，文本的大小不会随着窗口的大小改变而改变。
Q: 伪类选择器:checked将做用与input类型为radio或者checkbox,不会做用于option。

A: 不对。

伪类选择器checked的定义很明显:

The :checked CSS pseudo-class selector represents any radio (<input type="radio">), checkbox (<input type="checkbox">) or option (<option>in a <select>) element that is checked or toggled to an on state. The user can change this state by clicking on the element, or selecting a different value, in which case the :checked pseudo-class no longer applies to this element, but will to the relevant one.
Q: 在HTML文本中，伪类:root老是指向html元素？

A: 不是（答案中给出了是 ==||）。如下摘自知乎:root 与 html 在 CSS3 中指的是同一个元素吗？的答案：

单指建立的根。这个根可能不是 html ，若是是片断html，没有建立根，则为片断的根。把这下面 URL 打到支持 data URL 的瀏覽器看看（Firefox, Chrome, Safari, Opera），可见一斑：
```
data:application/xhtml+xml,<div xmlns="http://www.w3.org/1999/xhtml"><style>:root { background: green; } html { background: red !important; }</style></div>
复制代码
```
Q:translate()方法能移动一个元素在z轴上的位置？

A: 不能。translate()方法只能改变x轴，y轴上的位移。

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 {color:red;}
li {color:blue;}
复制代码

A: blue。

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 {color:red;}
#must-buy {color:blue;}
复制代码

A: blue。

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>
复制代码

.shopping-list .favorite {
    color: red;
}
#must-buy {
    color: blue;
}
复制代码

A: blue。

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。

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。

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。

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。

Q:#example位置如何变化：

<p id="example">Hello</p>
复制代码

#example {margin-bottom: -5px;}
复制代码

A: 向上移动5px。

Q: #example位置如何变化：

<p id="example">Hello</p>
复制代码

#example {margin-left: -5px;}
复制代码

A: 向左移动5px。

#i-am-useless 会被浏览器加载吗？

<div id="test1">
    <span id="test2"></span>
</div>
复制代码

#i-am-useless {background-image: url('mypic.jpg');}
复制代码

A: 不会

mypic.jpg 会被浏览器加载吗？

<div id="test1">
    <span id="test2"></span>
</div>
复制代码

#test2 {
    background-image: url('mypic.jpg');
    display: none;
}
复制代码

A: 会被下载。

mypic.jpg 会被浏览器加载吗？

<div id="test1">
    <span id="test2"></span>
</div>
复制代码

#test1 {
    display: none;
}
#test2 {
    background-image: url('mypic.jpg');
    visibility: hidden;
}
复制代码

A: 不会被下载。

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，样式都不会被采用。
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。
Q: screen关键词是指设备物理屏幕的大小仍是指浏览器的视窗？
```
@media only screen and (max-width: 1024px) {margin: 0;}
复制代码
```
A: 浏览器视窗

知识点总结

tips:根据以上考点总结下以下知识点，后期会写文章进行总结，这里只挑出重点进行解析。

关于CSS选择器以及优先级的知识可查阅以下文章：
如何计算优先级：

那么你如何计算指定选择器的优先级？若是你考虑到将优先级表示为用逗号隔开的四个数字就会至关简单，好比：1, 1, 1, 1 或0, 2, 0, 1
- 第一个数字(a)一般就是0，除非在标签上使用style属性；
- 第二个数字(b)是该选择器上的id的数量的总和；
- 第三个数字(c)是用在该选择器上的其它属性选择器和伪类的总和。这里包括class (.example) 和属性选择器(好比 li[id=red])；
- 第四个数字(d)计算元素(就像table、p、div等等)和伪元素(就像:first-line等)；
- 通用选择器(*)是0优先级；
- 若是两个选择器有一样的优先级，在样式表中后面的那个起做用。
浏览器CSS匹配顺序：

浏览器CSS匹配不是从左到右进行查找，而是从右到左进行查找。好比#divBox p span.red{color:red;}，浏览器的查找顺序以下：先查找html中全部class='red'的span元素，找到后，再查找其父辈元素中是否有p元素，再判断p的父元素中是否有id为divBox的div元素，若是都存在则匹配上。浏览器从右到左进行查找的好处是为了尽早过滤掉一些无关的样式规则和元素。
display:none 和visibilty:hidden的区别：

可参考：
- What is the difference between visibility:hidden and display:none?
- display:none和visibility:hidden的区别！
display:none和visibility:hidden都是把网页上某个元素隐藏起来的功能，但二者有所区别，通过亲自实验，我发现使用`` visibility:hidden属性会使对象不可见，但该对象在网页所占的空间没有改变（看不见但摸获得），等于留出了一块空白区域，而display:none`属性会使这个对象完全消失（看不见也摸不到）

display:none means that the the tag in question will not appear on the page at all (although you can still interact with it through the dom). There will be no space allocated for it between the other tags. visibility:hidden means that unlike display:none, the tag is not visible, but space is allocated for it on the page. so for example:
```
<span>test</span> | <span>Appropriate style in this tag</span> | <span>test</span>
复制代码
```
display:none would be:

test | | test

visibility:hidden would be:

test | | test

In visibility:hidden the tag is rendered, it just isn't seen on the page.
浏览器如何渲染，能够查阅以下文章：
BFC( block formatting contexts ) 块级格式上下文
margin，padding相关的知识能够参考查阅《CSS权威指南》