web前端笔试题库之CSS篇 _生活百科

之前的文章《web前端笔试题库之HTML篇》中，我们分享了一些关于HTML的前端面试题。下面本篇文章就接着上一篇，分享css部分的笔试题（附答案），大家快看看能答对几个！

文章插图

1、Q: CSS 属性是否区分大小写？
``` ul { MaRGin: 10px; } ```A: 不区分。 HTML ， CSS都对大小写不敏感，但为了更好的可读性和团队协作一般都小写，而在XHTML 中元素名称和属性是必须小写的。
2、Q: 行内(inline)元素设置margin-top和margin-bottom 是否起作用？
A: 不起作用。 (答案是起作用，个人觉得不对。 )
html 里的元素分为替换元素（replaced element）和非替换元素（non-replaced element）。

讨论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;}