题目：以下两次检测对象constructor是否拥有属性名1的结果分别是什么？
1
2
3
1 in Object(1.0).constructor //false
Number[1] = 123
1 in Object(1.0).constructor //true
解析：
1
实际上，Object(1.0)是将数字1.0封装成它对应的包装类的一个对象实例，比如Number(1.0)，所以此题的目的是为了检测1是否在Number上。一开始1并不在Number原型链上，所以返回false，直到添加了"Number[1]"这个下标属性之后，才会让1处于Number的原型链上，也因此返回了true。
题目：wrap这个div的高度是多少？150px
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<style type="text/css">
    .a, .b, .c{
        box-sizing: border-box;
        border: 1px solid;
    }
    .wrap{
        width: 250px;
    }
    .a{
        width: 100px;
        height: 100px;
        float: left;
    }
    .b{
        width: 100px;
        height: 50px;
        float: left;
    }
    .c{
        width: 100px;
        height: 100px;
        display: inline-block;
    }
</style>
<div class="wrap">
    <div class="a">a</div>
    <div class="b">b</div>
    <div class="c">c</div>
</div>
解析：
1
2
如果C没有display: inline-block;那么C会直接与A重叠，虽然文本让出位置也就是文本c会出现在A的下边界下方，但高度仍然为100px.
但是C有display: inline-block;会形成BFC，级块级格式化上下文，它是一个独立渲染的区域，与外部区域毫不相干，不会与浮动元素重叠。
图示
题目：向当前#list的最后元素之后添加100个新的li节点，合理且安全的操作方式是？
1
2
3
4
<ul id="list">
    <li>1</li>
    <li>2</li>
</ul>

解析：

1
2
创建Fragment, 通过循环方式创建新的li节点，添加到Fragment中，最后再将Fragment添加到#list中。
直接操作HTML会存在XSS攻击的风险。
题目：以下哪一项不能提高DOM元素操作效率
1
2
3
4
A. 处理列表子元素的点击事件时，使用事件代理
B. 插入大量DOM元素时，使用innerHTML替代逐个构建元素
C. 使用DocumentFragment替代多次appendChild操作
D. 使用addEventListener替代onxxx进行事件绑定
解析：
1
2
D
使用on绑定的事件会覆盖之前的on事件，而addEventListener则可以为一个元素绑定多个事件，且保证全都会被执行。
题目：符合代码规范的是
1
2
3
4
5
6
A. <ul><ol><li>item 1</li></ol></ul>
B. <table><tr><td>data 1</td><td>data 2</td></tr></table>
C. <p><ul><li>item 1</li></ul></p>
D. <a href="xxx"><p>some text</p></a>

BD
解析：
1
2
3
4
5
6
7
8
- p不能包含除了它本身之外的任何块元素
- a可以包含除了它本身之外的任意块元素
- 一般来说，是<a>标签嵌套<button>
- <dl>\<dt>\<dd>\<h>这些标题标签不推荐嵌套块级元素
- 块状元素可以嵌套行内元素和某些块状元素
- 行内元素不能嵌套块级元素
- li元素可以嵌套div，也可以嵌套ul ol
- li元素的祖先元素可能是li,但父元素不可能是li
题目：文本Hello, world.显示的颜色是
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<style>
    #content .text{
        text-color: red;
    }
    #content>.text{
        color: green;
    }
    #content div.title{
        font-color: blue;
    }
    strong{
        font-color: yellow;
    }
    *{
        color: black;
    }
</style>
<div id="content">
    <span class="text">
    	<strong class="title">Hello, world.</strong>
    </span>
</div>
解析:
1
2
3
black
1. text-color、font-color这两个属性是无效的，html5中并不存在这些属性，故只剩color: green;和color: black;
2. >是直系后代选择器，在DOM中<strong>标签和<div>标签中隔了一层<span>标签，故#content>.title{color: green}无法直接作用于<strong>标签。
题目：外层容器.outer的宽高分别是
1
2
3
4
5
6
7
8
9
10
11
12
<style>
    .outer{
        height: 50px;
    }
    .inner{
        width: 120px;
        height: 100px
    }
</style>
<div class="outer">
    <span class="inner">content</span>
</div>
解析：
1
span为行内元素，无法设置宽高；当添加样式display: block时，可设置宽高。div是块级元素，默认100%，而高的设置为50px.所以.outer的宽高分别为：高50px,宽100%。
题目：在一个行内元素中，显示了不同的三部分内容，若想要这三个内容以1：1：1的比例分配宽度，该如何实现
1
position: relative; -webkit-box-flex: 1;box-flex: 1;-webkit-box-flex:1;flex:1;
题目：错误的是
1
2
3
4
5
6
A. HTTP状态码302表示暂时性转移
B. domContentLoaded事件早于onload事件
C. IE6/7/8不支持事件捕获
D. localStorage存储的数据，在刷新页面后会消失

D.
题目：以下关于main1.css和main2.css的描述正确的是？
1
2
3
4
5
6
7
8
9
10
11
<head>
    <link href="main1.css" rel="stylesheet">
    <link href="main2.css" rel="stylesheet">
</head>

A. main1.css和main2.css同时开始加载，先加载完成的优先解析
B. 如果main1.css和main2.css中有相同的选择器规则，那么main2.css中的规则将合并main1.css的规则
C. main2.css只有在main1.css加载并解析后，才开始加载
D. 如果main1.css和main2.css中有相同的选择器规则，那么main2.css中的规则将被忽略

AB
题目：文本Dijkastra的颜色应该是？
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<ul class="authors" id="favorite">
    <li><span>Martin Fowler</span></li>
    <li id="related"><span class="hightlight">Dijkstra</span></li>
</ul>
ul#related span {
	color: red;
}
#favorite .hightlight{
	color: orange;
}
.hightlight{
	color: black;
}

orange
解析：
1
2
3
ul#related span的权重为：1+100+1=102
#favorite .hightlight的权重为：100+10=110
.hightlight的权重为10
题目：下列定义的CSS选择器中，哪个权重是最低的
1
2
3
4
A. #game div.name
B. #game .name
C. #game div
D. #game .name span
解析：
1
2
3
4
A = 100 + 1+ 10 = 111
B = 100 + 10 = 110
C = 100 + 1 = 101
D = 100 + 10 + 1 = 111
题目：123的颜色是
1
2
3
4
5
6
7
8
9
10
11
<style>
    .main{
        color: blue;
    }
    span{
        color: green;
    }
</style>
<div style="color: red !important;" class="main">
    <span>123</span>
</div>
解析：

green。继承的样式权重小于给自身设置样式的权重。