David Shariff通过网站提供了Web前端开发中CSS、HTML和JavaScript三部分的测试题。到发稿之日共有8320人参与了这个测试，可平均得分是53.8%。

CSS篇

Q1:CSS属性区分大小写吗？

ul {
    MaRGin: 10px;
}

A:NO(不区分)

这对于初学者来说，可能会一时拿不定主意，他们区分大小写吗？但话说回来，如果你有使用过DW或者PSD生成的页面，你会发现你的代码中会有很多类似下面这样的代码：

.box {
    BORDER:1PX SOLID RED;
}

但这个样式完全是有效的。不过有一点需要特别注意，如果你的HTML的结构中定义的是大写类名，而在样式中使用的是小写的，那么他们是有区别的。我们来看一个简单的演示示例：

Q2:你能给内联元素设置margin-top和margin-bottom吗？

A:No(不能设置)

margin-top和margin-bottom对于一个内联元素是根不起作用的。简单的理解，margin-top和margin-bottom就是让元素离远离自身顶部和底部的元素。
假设我们有一个这样的DEMO。
HTML

<div>
    <span>我是一个行内元素span</span>
    <span>我是一个行内元素span</span>
    <span>我是一个行内元素span</span>
    <strong>我是一个行内元素strong</strong>
    <span>我是一个行内元素span</span>
    <strong>我是一个行内元素strong</strong>
    <span>我是一个行内元素span</span>
    <strong>我是一个行内元素strong</strong>
    <span>我是一个行内元素span</span>
    <strong>我是一个行内元素strong</strong>
    <span>我是一个行内元素span</span>
    <strong>我是一个行内元素strong</strong>
</div>

CSS

div {
  width: 300px;
  margin: 20px auto;
  border: 1px solid green;
  padding: 5px;
  line-height: 1.4;
}
span {
  border: 1px solid blue;
}
strong {
  border: 1px solid orange;
}
span,
strong {
  margin-top: 5px;
  margin-bottom: 5px;
}

margin-top和margin-bottom应用到内联元素上，这在规范中是允许的，不过由于在向一个行内非替换元素（如img）应用外边距，它对行高没有任何影响。由于外边距实际上是透明的，所以这个声明没有任何视觉效果。其原因就在于行内非替换元素的外边距(margin-top和margin-bottom)不会改变一个元素的行高。

我们来演示一下，增加margin-top和margin-bottom值，对内联元素span和strong是否有所影响

效果再次证明，margin-top和margin-bottom对于一个内联元素来说是没有任何影响的。

Q3:内联元素设置padding-top和padding-bottom会添加到元素的尺寸上吗？

A:NO(不会)

对于内联元素，margin和padding存在一个重大的区别。为了说明这一点，我们给行内元素设置一个padding-top和padding-bottom的值，另个给其附上一个背景色，行内元素的背景会向上和向下面延伸。

理论上，对于有背景色和行内距的行内非替换元素，背景可以向元素上面和下面延伸：

strong {
  border: 1px solid orange;
  background: orange;
  padding-top:10px;
  padding-bottom: 10px;
}

当然行高没有改变，不过由于内距确实延伸了背景，所以背景应该可见，是这样吗？不错，背景确实可见，它与前面的行重叠，这正是我们期望的结果。但回到试题上来，padding-top和padding-bottom并没有增加行内元素的尺寸，如背景延伸所示，他们重叠在一起了。

Q4:如果你对元素设置字体大小:10 rem, 当用户调整大小/拖浏览器窗口时文本将相应变化大小么?

A:NO（不能）

REM是CSS3中新增的一个单位。在W3C官网上是这样描述rem的——“font size of the root element”。也就是说rem是相对于根元素，这样就意味着，我们只需要在根元素确定一个参考值，在根元素中设置多大的字体，这完全可以根据您自己的需求。但他并不能实现，随着浏览器的缩小或放大，而改变元素的字号。他仅能通过修改的字号大小来进行修改。接下来模仿一下这个问题的场景：

html {
    font-size: 16px;
}
p {
    font-size: 2rem;
}

接下来拖动浏览器大小，看其是否会修改p元素的字号：

Q5:伪类:checked将选择input控件的单选或复选框,但不会选择

A:False(假的)

这一题我也做错了，最初认为:checked是只对单选按钮和复选框有效。回想到HTML中定义了checked属性时，除了可以为单选按钮和复选框之外还可以为select的option设置这样的属性值。其作用表示的是选中。但万万没有想到option也可以通过:checked来设置选中的样式。下面的一段代码是来自于Mozilla:

/* any "checkable" element */
:checked {
  width: 50px;
  height: 50px;
}

/* only radio elements */
  input[type="radio"]:checked {
  margin-left: 25px;
}

/* only checkbox elements */
input[type="checkbox"]:checked {
  display: none;  
}

/* only option elements */
option:checked {
  color: red;
}

Q6:在一个HTML文档中,伪类:root总是指元素?

A:True(是的)

在绝大多数情况下你可能遇到，:root在Web页上指的就是元素。在HTML文档中元素永远是最高级别的父元素。所以他是:root可想而知的。然而CSS是一种表现层，在其他的文档格式中，如svg和XML，:root可以引用不同的元素。无也许是什么标记语言，:root总是选择文档树中最顶部的元素。

来看一个简单的示例：

:root {
  background-color: red;
  padding: 2em;
  border:5px solid green;
}

body {
  background-color: white;
  padding: 1.5em;
}

看个演示图，更形象一些：

Q7:translate()函数可以在z轴移动一个元素的位置吗?

A:False(不能)

使用translate()函数，你可以把元素从原来的位置移动，而不影响在X、Y轴上任何组件。他是一个2D的transform，但他不能让元素在Z轴上进行移动。不过在3D的transform函数可以让元素在Z轴上进行缩放效果。

Q8:“Sausage”文本的颜色是什么？

HTML

<ul class="shopping-list" id="awesome">
	<li><span>Milk</span></li>
	<li class="favorite" id="must-buy"><span class="highlight">Sausage</span></li>
</ul>

CSS

ul {
    color: red;
}
li {
    color: blue;
}

A:Blue(蓝色)

这是一个很基础的试题，考的就是选择器的权重问题，上面两个选择器都是标签选择器，按照选择器的权重等级之分，他们都是“０，０，０，１”。但同一个元素有两个或多个冲突的属性声明，那么有最高特殊性的声明就会胜出。如果同一个元素具有相同的权重，处在后面的样式就会比前面的声明重。将上面的示例制作一个演示图：

Q9:“Sausage”文本的颜色是什么？

HTML

<ul class="shopping-list" id="awesome">
    <li><span>Milk</span></li>
    <li class="favorite" id="must-buy"><span class="highlight">Sausage</span></li>
</ul>

CSS

ul li {
    color: red;/*0,0,0,2*/
}
#must-buy {
    color: blue;/*0,1,0,0*/
}

A:Blue(蓝色)

在选择器权重当中，一个ID的权重是“0,1,0,0”，而一个标签元素是0,0,0,1。针对这个示例来说，前一个选择器权重是”0,0,0,2″；后者的权重是“0,1,0,0”。因此，在这里他的颜色是蓝色。

Q10:“Sausage”文本的颜色是什么？

HTML

<ul class="shopping-list" id="awesome">
    <li><span>Milk</span></li>
    <li class="favorite" id="must-buy"><span class="highlight">Sausage</span></li>
</ul>

CSS

.shopping-list .favorite {
    color: red;/*0,0,2,0*/
}
#must-buy {
    color: blue;/*0,1,0,0*/
}

A:Blue(蓝色)

Q11:“Sausage”文本的颜色是什么？

HTML

<ul class="shopping-list" id="awesome">
    <li><span>Milk</span></li>
    <li class="favorite" id="must-buy"><span class="highlight">Sausage</span></li>
</ul>

CSS

ul#awesome {
    color: red;/*0,1,0,1*/
}
ul.shopping-list li.favorite span {
    color: blue;/*0,0,2,3*/
}

A:Blue(蓝色)

这个时候大家可能会感到很奇怪了，为什么这个还是蓝色的，而不是红色的。主要是他们作用的是不在同一个元素之上。

Q12:“Sausage”文本的颜色是什么？

HTML

<ul class="shopping-list" id="awesome">
    <li><span>Milk</span></li>
    <li class="favorite" id="must-buy"><span class="highlight">Sausage</span></li>
</ul>

CSS

ul#awesome #must-buy {
    color: red;/*0,2,0,1*/
}
.favorite span {
    color: blue!important;/*1,0,0,1,1*/
}

A:Blue(蓝色)

Q13:“Sausage”文本的颜色是什么？

HTML

<ul class="shopping-list" id="awesome">
    <li><span>Milk</span></li>
    <li class="favorite" id="must-buy"><span class="highlight">Sausage</span></li>
</ul>

CSS

ul.shopping-list li .highlight {
    color: red;/*0,0,2,2*/
}
ul.shopping-list li .highlight:nth-of-type(odd) {
    color: blue;/*0,0,3,2*/
}

A:Blue(蓝色)

Q14:“Sausage”文本的颜色是什么？

HTML

<ul class="shopping-list" id="awesome">
    <li><span>Milk</span></li>
    <li class="favorite" id="must-buy"><span class="highlight">Sausage</span></li>
</ul>

CSS

#awesome .favorite:not(#awesome) .highlight {
    color: red;/*0,2,2,0*/
}
#awesome .highlight:nth-of-type(1):nth-last-of-type(1) {
    color: blue;/*0,1,3,0*/
}

A:Red(红色)

问题8~14都是在考CSS选择器相关方面的知识，而其中最主要的是要理清楚选择器的权重问题。在CSS中，选择器的特殊性由选择器本身的组件确定。特殊性值表述为4个部分，如”0,0,0,0″。一个选择器的具体特殊性如下确定：

对于选择器中给定的各个ID属性值，加“0,1,0,0”。
对于选择器中给定的各个类属性值，属性选择或伪类，加”0,0,1,0″。
对于选择器中给定的各个元素为伪元素，加“0,0,0,1”。
结合符和通配符“*”以及”:not()”没有任何的加分权。
对于行内样式，加为“1,0,0,0”
对于”!important”加分高于上面的一切，将变成“1,0,0,0,0”
下面有几张图，能让你倍感亲切：

Q15:#example元素位置会发生什么？

HTML

<p id="example">Hello</p>

CSS

#example {
    margin-bottom: -5px;
}

A:”#example”之后的所有元素会向上移动“5px”。

Q16:#example元素位置会发生什么？

HTML

<p id="example">Hello</p>

CSS

#example {
    margin-left: -5px;
}

A:”#example”自身向左移动“5px”。

试题15和16测试的是margin对盒模型的影响。在CSS中，可以给元素设置负外边距(前面说过，对于内联元素，设置margin-top和margin-bottom是无效的)，这会导致元素超出其父元素，或者与其他元素重叠，但这并不违反盒模型。同样来看一个示例：

通常我们很少使用负的margin，但他能做的其实很多。以下几条是有关于负margin需要注意的地方：

负margin是绝对标准的CSS:这不是开玩笑。W3C甚至标注过：对于margin属性来说，负值是被允许的。这是Nuff说的，查看这篇文章会有更多详细内容。
负maring不是一种hack方法:千真万确，不能因为缺乏对负marign的理解，或者因为它长得像hack，就认为它是一种hack方法。除非你是用来修复自己在其他地方造成的错误。
不脱离文档流:不使用float的话，负margin元素是不会破坏页面的文档流。所以如果你使用负margin上移一个元素，所有跟随的元素都会被上移。
完全兼容:所有现代浏览器都完全支持负margin（IE6在大多数情况下也支持）。
浮动会影响负margin的使用:负margin不是你每天都用的CSS属性，应用时应小心谨慎。
Dreamweaver不解析负margin:DW的设计视图不会解析负margin。但问题是你为什么要在设计视图中检查你的网站呢？
如果使用得当，负margin是非常强大的属性，以下是２种（负margin占主导位置）的场景：

作用于static元素上的负margin属性

当static元素的margin-top/margin-left被赋予负值时，元素将被拉进指定的方向。例如：

/* 元素向上移10px*/
#mydiv1 {margin-top:-10px;}

但如果你设置margin-bottom/right为负数，元素并不会如你所想的那样向下/右移动，而是将后续的元素拖拉进来，覆盖本来的元素。

/* 
* #mydiv1后续元素向上移10px, #mydiv1 本身不移动
*/
#mydiv1 {margin-bottom:-10px;}

如果没有设定width属性，设定负margin-left/right会将元素拖向对应的方向，并增加宽度，此时的margin的作用就像padding一样。

浮动元素上的负margin

如果给一个浮动元素加上相反方向的负margin，则会使行间距为0且内容重叠。这对于创建1列是100%宽度而其他列是固定宽度（比如100px）的自适应布局来说是非常有用的方法。

<div id="mydiv1">First</div>
<div id="mydiv2">Second</div>
/* 应用在与浮动相反方向的负margin */
#mydiv1 {float:left; margin-right:-100px;}

若两个元素都为浮动，且#mydiv1的元素设定margin-right为20px。这样#mydiv2会认为#mydiv1的宽度比原来宽度缩短了20px（因此会导致重叠）。但有意思的是，#mydiv1的内容不受影响，保持原有的宽度。

如果负margin等于实际宽度，则元素会被完全覆盖。这是因为元素的完全宽度等于margin，padding，border，width相加而成，所以如果负margin等于余下三者的和，那元素的实际宽度也就变成了0px。

Q17:浏览器会下载没有被应用的样式内引用的资源？

HTML

<div id="test1">
    <span id="test2"></span>
</div>

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

A:NO(不会)

对于HTML中的img，大家都知道，只要页面加载了，图片就会加载。但在CSS中的背景图片，没有被引用，那么会不会加载呢？有些人会认为会，因为他在样式中调用了，只不过不存在。有些人会认为不会，因为没用到这个资源。那么我们通过下面的图来看看：

测试题中做个修改，把id换成结构中存大的，如”#test1″,在看一张图的变化：

不用说什么，两图一对比，胜过千言万语。

Q18:页面加载完毕后，浏览器会下载“mypic.jpg”图片吗？

HTML

<div id="test1">
    <span id="test2"></span>
</div>

CSS

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

A:Yes(会)

Q19:页面加载完毕后，浏览器会下载“mypic.jpg”图片吗？

HTML

<div id="test1">
    <span id="test2"></span>
</div>

CSS

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

主义No(不会)

第18和19两个测试题，和第17探讨的是同一个问题，只不过多了元素隐藏和显示的参数。如果你拿不定主意，那么写一个测试文件。一测一目了然。如果你想知道为什么，那就需要GG一下了。因为对于他们的原理我也不懂，我就不误人子弟了。

Q20:”only”选择器起什么作用？

@media only screen and (max-width: 1024px) {
    margin: 0;
}

A:阻止老版本浏览器解析剩下的选择器

Q21:overflow:hidden会创建一个新的BFC(block formatting context)?

HTML

<div>
    <p>I am floated</p>
    <p>So am I</p>
</div>

CSS

div {
    overflow: hidden;
}
p {
    float: left;
}

A:Yes(会)

w3c规范中的BFC定义：浮动元素和绝对定位元素，非块级盒子的块级容器（例如 inline-blocks, table-cells, 和 table-captions），以及overflow值不为“visiable”的块级盒子，都会为他们的内容创建新的BFC（块级格式上下文）。

在BFC中，盒子从顶端开始垂直地一个接一个地排列，两个盒子之间的垂直的间隙是由他们的margin 值所决定的。在一个BFC中，两个相邻的块级盒子的垂直外边距会产生折叠。

在BFC中，每一个盒子的左外边缘（margin-left）会触碰到容器的左边缘(border-left)（对于从右到左的格式来说，则触碰到右边缘）。

BFC的通俗理解：首先BFC是一个名词，是一个独立的布局环境，我们可以理解为一个箱子（实际上是看不见摸不着的），箱子里面物品的摆放是不受外界的影响的。转换为BFC的理解则是：BFC中的元素的布局是不受外界的影响（我们往往利用这个特性来消除浮动元素对其非浮动的兄弟元素和其子元素带来的影响。）并且在一个BFC中，块盒与行盒（行盒由一行中所有的内联元素所组成）都会垂直的沿着其父元素的边框排列。

Q22:”Screen””关键字是匹配设备的物理屏幕还是浏览器的viewport(视窗)?

@media only screen and (max-width: 1024px) {
    margin: 0;
}

A:浏览器的视窗

第20和第21考的是媒体查询的知识，如果你对CSS的media有一定的了解，那么这两题对你来说就是小菜。

HTML篇

Q1:

<keygen>

是HTML5有效的标签？

A:Yes(是的)

是不是有效标签，对于不熟悉HTML5的同学来说，就只能猜了，但对HTML5有观注过，或稍为了解了一点的同学，能马上回答出来。如果你对HTML5标签方面不太熟悉，可以猛击这里查看。

Q2:会直接修改文本的方向吗？

A:Yes(会)

Q3:下面的HTML是有效的？

<figure>
    <img src="myimage.jpg" alt="My image">
    <figcaption>
        <p>This is my self portrait.</p>
    </figcaption>
</figure>

A:Yes(合法)

Q4:什么情况下使用<small>标签？

A:当你想在

Q5:如果一个web页面包含多个h1标签,它会影响SEO吗?

A: No(不会)

Q6:如果你有一个搜索结果页面,想突出显示搜索词,HTML标签,你会使用什么? strong,,mark,em,或highlight

A:mark

Q7:scoped属性起什么作用？

<article>
    <h1>Hello World</h1>
    <style scoped>
        p {
            color: #FF0;
        }
    </style>
    <p>This is my text</p>
</article>

<article>
    <h1>This is awesome</h1>
    <p>I am some other text</p>
</article>

A:若一个父元素含有Scope包裹的样式，则此样式规则适用于这个父元素中所有的子元素

Q8:HTML5中链接a能放置块元素吗？

<article>
    <a href="#">
        <h1>Hello</h1>
        <p>I am some text</p>
    </a>
</article> 

A:Yes(可以)

Q9:当页面第一次加载，下面的html会触发一个http请求么？

<img src="mypic.jpg" style="visibility: hidden" alt="My picture">

A:Yes(会)

Q10:当页面第一次加载，下面的html会触发一个http请求么？

<div style="display: none;">
    <img src="mypic.jpg" alt="My photo">
</div>

A:Yes(会)

Q11:main1.css会在hello world弹出前下载解析完毕么？

<head>
    <link href="main1.css" rel="stylesheet">
    <script>
        alert('Hello World');
    </script>
</head> 

A:Yes(会)

Q12:Main1.css需要被下载解析完毕后才请求main2css么？

<head>
    <link href="main1.css" rel="stylesheet">
    <link href="main2.css" rel="stylesheet">
</head>

A:No(不需要)

Q13:Main2.css会在paragraph1渲染完毕前下载并解析么？

<head>
    <link href="main1.css" rel="stylesheet">
</head>
<body>
    <p>Paragraph 1</p>
    <p>Paragraph 2</p>
    <link href="main2.css" rel="stylesheet">
</body> 

A: Yes(会)

在HTML部分，主要涉及了标签，以及文件加载和渲染的顺序。如果需要深入的了解，我想要尝试做一些案例测试。这样拿到的答案会更准确一些，也会让自己对所掌握的知识深刻一些。

JavaScript篇

JavaScript相关的知识，对于我来说，就是一片空白，在做这些测试的时候，几乎是以猜来完成，所以也阵亡一大片。下面这部分邀请了@民工精髓大大，为大家介绍JavaScript部分。

Q1:下面参数的值是多少？

"1" + 2 + "3" + 4;

A: 1234

加法优先级等同，从左往右，数字与字符串相加，数字转换成字符串进行运算，结果等同于：”12″+”3″+4 = “123”+4 = “1234”。

Q2:下面参数的值是多少？

4 + 3 + 2 + "1"

A:91

优先级同上，从左往右，等同于：7+2+”1″ = 9+”1″ = “91”。

Q3:下面代码弹出的是什么？

var foo = 1;
function bar() {
    foo = 10;
    return;
    function foo() {}
}
bar();
alert(foo);

A:1

function的定义会提前到当前作用域之前，所以等同于：

var foo = 1;
function bar() {
    function foo() {}
    foo = 10;
    return;
}
bar();
alert(foo);

所以，在foo=10的时候，foo是有定义的，属于局部变量，影响不到外层的foo。

Q4:下面代码弹出的是什么？

function bar() {

    return foo;

    foo = 10;

    function foo() {}

    var foo = 11;

}

alert(typeof bar());

A:function

与上题类似，等同于：

function bar() {
    function foo() {}
    return foo;
    foo = 10;
    var foo = 11;
}
alert(typeof bar());

在return之后声明和赋值的foo都无效，所以返回了function。

Q5:下面代码弹出值顺序是什么？

var x = 3;
var foo = {
    x: 2,
    baz: {
        x: 1,
        bar: function() {
            return this.x;
        }
    }
}
var go = foo.baz.bar;
alert(go());
alert(foo.baz.bar());

A:3,1

this指向执行时刻的作用域，go的作用域是全局，所以相当于window，取到的就是window.x，也就是var x=3;这里定义的x。而foo.baz.bar()里面，this指向foo.baz，所以取到的是这个上面的x，也就是1。

Q6:下面代码弹出值是什么？

var x = 4,

    obj = {

        x: 3,

        bar: function() {

            var x = 2;

            setTimeout(function() {

                var x = 1;

                alert(this.x);

            }, 1000);

        }

    };

obj.bar();

A:4

不管有没有这个setTimeout，它里面这个function都是孤立的，this只能是全局的window，即使不延时，改成立即执行结果同样是4。

Q7:下面代码弹出值是什么？

x = 1;

function bar() {

    this.x = 2;

    return x;

}

var foo = new bar();

alert(foo.x);

A:2

这里主要问题是最外面x的定义，试试把x=1改成x={}，结果会不同的。这是为什么呢？在把函数当作构造器使用的时候，如果手动返回了一个值，要看这个值是否简单类型，如果是，等同于不写返回，如果不是简单类型，得到的就是手动返回的值。如果，不手动写返回值，就会默认从原型创建一个对象用于返回。

Q8:下面代码弹出值是什么？

function foo(a) {

    alert(arguments.length);

}

foo(1, 2, 3);

A:3

arguments取的是实参的个数，而foo.length取的是形参个数。

Q9:下面代码弹出值是什么？

var foo = function bar() {}; 

alert(typeof bar);

A:undefined

这种情况下bar的名字从外部不可见，那是不是这个名字别人就没法知道了呢？不是，toString就可以看到它，比如说alert(foo)，可以看看能打出什么。

Q10:下面代码弹出值是什么？

var arr = [];

arr[0]  = 'a';

arr[1]  = 'b';

arr.foo = 'c';

alert(arr.length);

A:2

数组的原型是Object，所以可以像其他类型一样附加属性，不影响其固有性质。

Q11:下面代码弹出值是什么？

function foo(a) {

    arguments[0] = 2;

    alert(a);

}

foo(1);

A:2

实参可以直接从arguments数组中修改。

Q12:下面代码弹出值是什么？

function foo(){}

delete foo.length;

alert(typeof foo.length);

A:number

foo.length是无法删除的，它在Function原型上。

David Shariff在总共提供了47道题，22道CSS题,13道HTML题和12道Javascript题。这些题对于一位Web前端人员来说都不是什么很复杂的题，是一些基础题、概念题，但也是非常让人理解或者混淆的题。在此对CSS和javascript部分做了一些分析和推荐阅读。希望这些题能帮助大家能测试自己所掌握的知识以及扩展自己的阅读。