Web前端面试题 CSS部分问题与解答

时间：2021-09-05 13:39:06

1. Q: CSS 属性是否区分大小写？

ul {
MaRGin: 10px;
}

A: 不区分。
HTML，CSS都对大小写不敏感，但为了更好的可读性和团队协作一般都小写，而在XHTML 中元素名称和属性是必须小写的。

2. Q: 行内(inline)元素 设置margin-top和margin-bottom 是否起作用？
A: 不起作用。(答案是起作用，个人觉得不对。)
html 里的元素分为替换元素（replaced element）和非替换元素（non-replaced element）。
○ 替换元素是指用作为其他内容占位符的一个元素。最典型的就是img，它只是指向一个图像文件。以及大多数表单元素也是替换，例如input等。
○ 非替换元素是指内容包含在文档中的元素。例如，如果一个段落的文本内容都放在该元素本身之内，则这个段落就是一个非替换元素。

讨论margin-top和margin-bottom对行内元素是否起作用，则要对行内替换元素和行内非替换元素分别讨论。

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

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

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

3. Q: 对内联元素设置padding-top和padding-bottom是否会增加它的高度？（原题是Does setting padding-top and padding-bottom on an inline element add to its dimensions?）
A: 答案是不会。同上题比较纠结，不太明白这里的 dimensions指的是到底是什么意思？放置一边，咱们来分析下。对于行内元素，设置左右内边距，左右内边距将是可见的。而设置上下内边距，设置背景颜色后可以看见内边距区域有增加，对于行内非替换元素，不会影响其行高，不会撑开父元素。而对于替换元素，则撑开了父元素。看下demo，更好的理解下：

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

4. Q: 设置p的font-size:10rem，当用户重置或拖曳浏览器窗口时，文本大小是否会也随着变化？
A: 不会。
rem是以html根元素中font-size的大小为基准的相对度量单位，文本的大小不会随着窗口的大小改变而改变。

5. 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.

6. 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>

7. Q:translate()方法能移动一个元素在z轴上的位置？
A: 不能。translate()方法只能改变x轴，y轴上的位移。

8. 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。
9. 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。
10. 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。
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-left: -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: 浏览器视窗

知识点总结：

tips:根据以上考点总结下如下知识点，后期会写文章进行总结，这里只挑出重点进行解析。
● 关于CSS选择器以及优先级的知识可查阅如下文章：
○ CSS 选择器参考手册
○ CSS选择器笔记
○ 高级CSS样式选择器
○ 征服高级CSS选择器
○ 详解CSS选择器、优先级与匹配原理
○ 优先级
○ 牢记 31 种 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.

● 浏览器如何渲染，可以查阅如下文章：
○ 浏览器的渲染原理简介
○ 专题：浏览器:渲染重绘、重排两三事
○ 浏览器加载和渲染HTML的顺序以及Gzip的问题
○ 从FE的角度上再看输入url后都发生了什么

● BFC( block formatting contexts ) 块级格式上下文
○ 深入理解BFC和Margin Collapse
○ CSS布局中一个简单的应用BFC的例子
○ 理解BFC(Block Formatting Context)

● margin，padding相关的知识可以参考查阅《CSS权威指南》

标签：

相关文章