笔试学习贴

最近拿到了博思软件校园招聘和拼多多的笔试机会，现在就准备一下

1、哪个样式定义后，内敛（非块状）元素可以定义宽度和高度

答案：display:block

1
2
3
4
5
display属性 :
block :　CSS1 块对象的默认值。将对象强制作为块对象呈递，为对象之后添加新行  可以定义高度和宽度
none :　CSS1 隐藏对象。与 visibility 属性的hidden值不同，其不为被隐藏的对象保留其物理空间
inline :　CSS1 内联对象的默认值。将对象强制作为内联对象呈递，从对象中删除行
inline-block :　IE5.5 将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内 inherit: 看display默认是不具备继承性的，使用inherit可以让其继承父对象的display属性。
2、新窗口打开网页，用到以下哪个值

答案：_blank

在html中通过<a>标签打开一个链接，通过 <a> 标签的 target 属性规定在何处打开链接文档。

如果在标签<a>中写入target属性，则浏览器会根据target的属性值去打开与其命名或名称相符的 框架<frame>或者窗口.

在target中还存在四个保留的属性值如下，

  • 属性值
值 描述
_blank 在新窗口中打开被链接文档。
_self 默认。在相同的框架中打开被链接文档。
_parent 在父框架集中打开被链接文档。
_top 在整个窗口中打开被链接文档。
framename 在指定的框架中打开被链接文档。

这些 target 的所有 4 个值都以下划线开始。任何其他用一个下划线作为开头的窗口或者目标都会被浏览器忽略，因此，不要将下划线作为文档中定义的任何框架 name 或 id 的第一个字符。

3、元素的alt和title有什么异同，选出正确的说法

alt是html标签的属性，而title既是html标签，又是html属性。
title标签这个不用多说，网页的标题就是写在<title></title>这对标签之内的。
title作为属性时，用来为元素提供额外说明信息。例如，给超链接标签a添加了title属性，把鼠标移动到该链接上面是，就会显示title的内容，以达到补充说明或者提示的效果。
而alt属性则是用来指定替换文字，只能用在img、area和input元素中（包括applet元素），用于网页中图片无法正常显示时给用户提供文字说明使其了解图像信息。

4、下述有关css属性position的属性值的描述，说法错误的是？

CSS中Position属性有四个可选值，它们分别是：static、absolute、fixed、relative。

◆position:static　无定位

该属性值是所有元素定位的默认情况，在一般情况下，我们不需要特别的去声明它，但有时候遇到继承的情况，我们不愿意见到元素所继承的属性影响本身，从而可以用position:static取消继承，即还原元素定位的默认值。

◆position:absolute　绝对定位

使用position:absolute，能够很准确的将元素移动到你想要的位置，

◆position:fixed　相对于窗口的固定定位

这个定位属性值是什么意思呢？元素的定位方式同absolute类似，但它的包含块是视区本身。在屏幕媒体如WEB浏览器中，元素在文档滚动时不会在浏览器视察中移动。例如，它允许框架样式布局。在页式媒体如打印输出中，一个固定元素会出现于第一页的相同位置。这一点可用于生成流动标题或脚注。我们也见过相似的效果，但大都数效果不是通过CSS来实现了，而是应用了JS脚本。

请特别注意，IE6不支持CSS中的position:fixed属性。真的非常遗憾，要不然我们就可以试试这种酷酷的效果了。

◆position:relative　相对定位

所谓相对定位到底是什么意思呢，是基于哪里的相对呢？我们需要明确一个概念，相对定位是相对于元素默认的位置的定位。既然是相对的，我们就需要设置不同的值来声明定位在哪里，top、bottom、left、right四个数值配合，来明确元素的位置。

5、下面有关javascript常见事件的触发情况

常见事件：

  1. 点击事件：
    1. onclick：单击事件
    2. ondblclick: 双击事件
  2. 焦点事件：
    1. onblur:失去焦点
    2. onfocus:元素获得焦点
  3. 加载事件
    1. onload：一张页面或一幅图像完成加载
  4. 鼠标事件：
    1. onmousedown: 鼠标按钮被松下
    2. onmouseup:鼠标按键被松开
    3. onmousemove:鼠标被移动
    4. onmouseover:鼠标移到某元素之上
    5. onmouseout:鼠标从某元素上移开
  5. 键盘事件：
    1. onkeydown:某个键盘按键被按下
    2. onkeyup:某个键盘按键被松开。
    3. onkeypress:某个键盘按键被按下并松开
  6. 选择和改变：
    1. onchange:域的内容被改变
    2. onselect:文本被选中
  7. 表单事件：
    1. onsubmit 确认按钮被点击
    2. onreset:重置按钮被点击
6、下述有关border:none以及border:0的区别？

1.效果

border-style:none;//无边框

border-width:0;//边框宽度为0px

2.区别

（1）性能差异

border:0;浏览器对border-width、border-color进行渲染，占用内存。

border:none;浏览器不进行渲染，不占用内存。

Chrome：

border:none;>> border:initial none initial;

border:0;>> border:0 initial initial ;

Firefox、360：

border:none; >>border:medium none;

border:0;>> border:0 none;

计算出的样式：

border:0px none 元素color属性值;

（2）浏览器兼容

IE7-不支持border:none;

W3C提示：请始终把border-style属性声明到border-color属性之前，元素必须在改变颜色之前获得边框。

7、下面有关Css sprites说法？

CSS Sprites

1.简介

CSS Sprites在国内很多人叫css精灵，是一种网页图片应用处理方式。它允许将一个页面涉及到的所有零星图片都包含到一张大图中， 利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位， 访问页面时避免图片载入缓慢的现象。

2.优点

（1）CSS Sprites能很好地减少网页的http请求，从而大大的提高页面的性能，这是CSS Sprites最大的优点，也是其被广泛传播和应用的主要原因；

（2）CSS Sprites能减少图片的字节；

（3）CSS Sprites解决了网页设计师在图片命名上的困扰，只需对一张集合的图片命名，不需要对每一个小图片进行命名，从而提高了网页制作效率。

（4）CSS Sprites只需要修改一张或少张图片的颜色或样式来改变整个网页的风格。

3.缺点

（1）图片合并麻烦：图片合并时，需要把多张图片有序的合理的合并成一张图片，并留好足够的空间防止版块出现不必要的背景。

（2）图片适应性差：在高分辨的屏幕下自适应页面，若图片不够宽会出现背景断裂。

（3）图片定位繁琐：开发时需要通过工具测量计算每个背景单元的精确位置。

（4）可维护性差：页面背景需要少许改动，可能要修改部分或整张已合并的图片，进而要改动css。在避免改动图片的前提下，又只能（最好）往下追加图片，但这样增加了图片字节。

8、无webkit内核的是

Wekbit是一个开源的Web浏览器引擎，也就是浏览器的内核。Apple的Safari, Google的Chrome, Nokia S60平台的默认浏览器，Apple手机的默认浏览器，Android手机的默认浏览器均采用的Webkit作为器浏览器内核。Webkit的采用程度由 此可见一斑，理所当然的成为了当今主流的三大浏览器内核之一。另外两个分别是Gecko和Trident，大名鼎鼎的Firefox便是使用的Gecko 内核，而微软的IE系列则使用的是Trident内核。

另外，搜狗浏览器是双核的，双核并不是指一个页面由2个内核同时处理,而是所有网页（通常是标准通用标记语言的应用超文本标记语言）由webkit内核处理,只有银行网站用IE内核

9、为所有<h1>添加背景颜色

h1{background-color:#111111;}

10、Css哪个属性不属于尺寸属性

height、line-height、min-width top不是，top是距离，而非尺寸

11、正则里的$描述正确的是

^是正则表达式匹配字符串开始位置

$是正则表达式匹配字符串结束位置

12、关于ES6解构表达式
1
let [a,b, c,d, e] = ``"hello"``;

描述正确的是（）

解析：一峰老师的ECMAScript 6入门：https://es6.ruanyifeng.com/#docs/destructuring

字符串的解构赋值

字符串也可以解构赋值，因为此时字符串被转换成一个类似数组的对象

1
2
3
4
5
6
let [a,b, c,d, e] = "hello";
console.log(a);  //h
console.log(b);  //e
console.log(c);  //l
console.log(d);  //l
console.log(e);  //o

类似数组的对象都有一个 length 属性，因此还可以对这个属性解构赋值

1
2
let {length : len} = 'hello';
console.log(len);  //5
13、关于ES6 箭头函数 ()=>{} ，描述（）
  • 当箭头函数没有参数或有大于等于两个的参数时，必须使用括号，如：let a = ()=>{} 或 let a = (b, c) => {};
  • 箭头函数没有arguments 绑定
  • 箭头函数的this是函数定义的对象，而不是使用函数的对象
  • var f = v => v
14、Http请求返回码（status code）中，代表[未授权的请求]的代码是

401

15、当HTMl页面加载完毕时触发的事件是

onload

16、CSS3中，能使用div的宽度变化有2秒的过渡效果的属性是提示：

div {
transition: width 2s;
}

17、请使用Promise封装Ajax操作

原始的Ajax操作如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var onSuccess = function(result){}; //成功的回调
var onFail = function(error){}; //失败的回调
var req = new XMLHttpRequest();
req.open("POST", "www.baidu.com", true);
req.onload = function(){
  if(req.readyState === 4 && req.status === 200){
    onSuccess(req.response);
  } else {
    onFail(req.statusText);
  }
}
req.onerror = function(){
  onFail(Error("网络异常"));
}

答案：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
return new Promise(function(resolve, reject){
   var req = new XMLHttpRequest();
   req.open("POST","www.baidu.com", true);
   req.onload = function(){
     if(req.readyState === 4 && req.status === 200){
       resolve(req.response);
     } else {
       reject(req.statusText);
     }
   }
   req.onerror = function(){
     reject(Error("网络异常"));
   }
 });

尝试把它跑起来：

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
30
31
32
33
34
35
36
37
38
<html>

<head></head>

<body>
    <button onclick="myFunction()">发送</button>
</body>

</html>
<script>
    const request = function (method, url, isajax) {
        return new Promise((resolve, reject) => {
            let req = new XMLHttpRequest();
            req.open(method, url, isajax);
            req.onload = function () {
                if (req.readState === 4 && req.status === 200) {
                    resolve(req.response)
                } else {
                    reject(req.statusText);
                }
               
                req.onerror = function () {
                    reject(Error("网络异常"))
                }
            }
            req.send();
        })
    }

    function myFunction() {
        let req = request("post", "www.baidu.com", true)
        req.then((e) => {
            console.log(e)
        }, (e) => {
            console.log(e)
        })
    }
</script>
18、对于HTTPS建立连接的过程，下面描述正确的是

DNS TCP TLS HTTP

19、对于javascript执行引擎描述

Node.js的Buffer类型对象在创建时内存不会分配到V8堆上

20、关于解构的说法
  • 不完全结构，也会成功，不会报错。
  • 只要支持Iterator接口，都可以被结构赋值。
  • null可以替代默认值，而成功的结构赋值。
  • 结构中不定参数可以出现在除第一个以外的其它的其他位置。
  • 默认值可以引用结构赋值的其他变量，但该变量必须已经声明。
21、下列对css外边距描述正确的是（不考虑BFC对边距的影响）

两个上下相邻的同级元素Div1，Div2。Div1的下边距是20px，Div2的上边距是10px。Div1和Div2的间距是20px

box1的底部margin为10px，box2的顶部margin为20px，但表现在页面上2者之间的间隔为20px，而不是预想中的10+20px=30px，结果是选择2者之间最大的那个margin，这种机制被称为“外边距合并”；外边距合并不仅仅出现在相邻的元素间，父子间同样会出现。

22、indexDB

通俗地说，IndexedDB 就是浏览器提供的本地数据库，它可以被网页脚本创建和操作。IndexedDB 允许储存大量数据，提供查找接口，还能建立索引。这些都是 LocalStorage 所不具备的。就数据库类型而言，IndexedDB 不属于关系型数据库（不支持 SQL 查询语句），更接近 NoSQL 数据库。

IndexedDB 具有以下特点。

（1）键值对储存。 IndexedDB 内部采用对象仓库（object store）存放数据。所有类型的数据都可以直接存入，包括 JavaScript 对象。对象仓库中，数据以”键值对”的形式保存，每一个数据记录都有对应的主键，主键是独一无二的，不能有重复，否则会抛出一个错误。

（2）异步。 IndexedDB 操作时不会锁死浏览器，用户依然可以进行其他操作，这与 LocalStorage 形成对比，后者的操作是同步的。异步设计是为了防止大量数据的读写，拖慢网页的表现。

（3）支持事务。 IndexedDB 支持事务（transaction），这意味着一系列操作步骤之中，只要有一步失败，整个事务就都取消，数据库回滚到事务发生之前的状态，不存在只改写一部分数据的情况。

（4）同源限制 IndexedDB 受到同源限制，每一个数据库对应创建它的域名。网页只能访问自身域名下的数据库，而不能访问跨域的数据库。

（5）储存空间大 IndexedDB 的储存空间比 LocalStorage 大得多，一般来说不少于 250MB，甚至没有上限。

（6）支持二进制储存。 IndexedDB 不仅可以储存字符串，还可以储存二进制数据（ArrayBuffer 对象和 Blob 对象）

23、浮点方法
  1. parseFloat 解析一个字符串，并返回一个浮点数
  2. toFixed 把数字转换为字符串，结果的小数点后有指定位数的数字
  3. Math.round 把一个数字舍入为最接近的整数
  4. toPrecision 把数字格式化为指定的有效数字
24、如何判断一个js对象是否是Array,arr为要判断的对象，其中最准确的方法是？
1
Object.prototype.toString.call(arr) === '[object Array]';

img

instanceof 在跨 frame 对象构建的场景下会失效

25、假设DOM结构为：
1
<div id="a"><div id="b"></div></div>

JS代码为：

当点击id为b的div时，控制台输出的内容是：

1
2
document.getElementById('a').addEventListener('click', e => {console.log(1)});
document.getElementById('b').addEventListener('click', e => {e.preventDefault();console.log(2)});

当点击id为b的div时，控制台输出的内容是：

1
2
2
1
26、js中==和===

==是会隐式的进行类型转换再进行比较的

===是不会进行类型转换，严格相等运算符

27、html5中使用的媒体元素
  • audio 定义音频
  • video 定义视频
  • embed 作为外部应用的容器
  • source 多种媒体源的支持
  • track 定义媒体的文本跟踪
28、SVG是什么

什么是SVG?

  • SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
  • SVG 用来定义用于网络的基于矢量的图形
  • SVG 使用 XML 格式定义图形
  • SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失
  • SVG 是万维网联盟的标准
  • SVG 与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体
    (SVG是HTML下的一个分支)
29、HTML5中新增的标签

新增header，footer，nav，article，section，aside，datalist，audio，video，embed，input属性

30、canvas

canvas 中绘制的元素不可以通过浏览器提供的接口获取到。

31、SEO优化
32、XML和JSON的比较

JSON与XML的区别，在菜鸟教程上可以容易找到（https://www.runoob.com/json/json-vs-xml.html）。

A. 针对 AJAX 应用，JSON 比 XML 数据加载更快，更简单。

B. 参考tlltll友友对Java和Javascript例子的解释。

C和E都在说XML比JSON好。但是菜鸟教程上明确指明JSON比XML好。😂😂😂JSON可以使用数组形式，XML不能。

D.JSON 是存储和交换文本信息的语法，是轻量级的文本数据交换格式；而HTML5是为了能在移动设备上支持多媒体而被创造，是HTML（用来描述网页的一种标记语言）最新的修订版本。

33、伪类和伪元素的区别

https://www.cnblogs.com/andy-lehhaxm/p/9561776.html

34、哪些可以不用/闭合

HTML5中：
自关闭的斜线(/)对 ：area, base, br, col, command, embed, hr, img, input, keygen, link, meta, param, source, track, wbr空标签无效，言即不再需要自闭合(/)这个小尾巴了，如果要写上也是可以的。

35、CSS样式中，Border-radius属性作用是什么

border-radius，国内翻译成圆角，你可能以为这个属性就是用来画圆角，但是除此之外，radius其实指的是边框所在圆的半径，这个CSS3属性不仅能够创建圆角，还可以创建椭圆角，把这些角按照不同的顺序和大小来展现，能够绘制成多种多样的图形。
如：border-radius:10px 15px 10px 5px;

四个值分别表示左上角、右上角、右下角、右下角。

36、产生带有正方形项目的列表
1
list-style-type: square
37、input属于窗体元素,层级显示比flash、其它元素都高。请判断这句话的正确与否。（F）

在html中，帧元素（frameset）的优先级最高，表单元素比非表单元素的优先级要高。

表单元素包括：文本输入框，密码输入框，单选框，复选框，文本输入域，列表框等等；

非表单元素包括：连接（a），div,table,span等。

所有的html元素又可以根据其显示分成两类：有窗口元素以及无窗口元素。有窗口元素总是显示在无窗口元素的前面。

有窗口元素包括：select元素，object元素，以及frames元素等等。

无窗口元素：大部分html元素都是无窗口元素。

38、<address>和<hr>和<a>和<cite>

<address> 标签定义文档或文章的作者/拥有者的联系信息。

<hr> 标签在 HTML 页面中创建一条水平线。

<a> 标签定义超链接，用于从一张页面链接到另一张页面。

<cite> 标签通常表示它所包含的文本对某个参考文献的引用，比如书籍或者杂志的标题。

39、input元素种类

HTML input元素种类

  • email

  • url

  • number

  • range

  • Date pickers(date, month, week, time, datetime, datetime-local)

  • search

  • color

40、hgroup在H5中用于组合标题元素
41、slider可以定义滑块控件

其他什么的

button 定义可点击的按钮（大多与 JavaScript 使用来启动脚本）
checkbox 定义复选框。
color 定义拾色器。
date 定义日期字段（带有 calendar 控件）
datetime 定义日期字段（带有 calendar 和 time 控件）
datetime-local 定义日期字段（带有 calendar 和 time 控件）
month 定义日期字段的月（带有 calendar 控件）
week 定义日期字段的周（带有 calendar 控件）
time 定义日期字段的时、分、秒（带有 time 控件）
email 定义用于 e-mail 地址的文本字段
file 定义输入字段和 “浏览…” 按钮，供文件上传
hidden 定义隐藏输入字段
image 定义图像作为提交按钮
number 定义带有 spinner 控件的数字字段
password 定义密码字段。字段中的字符会被遮蔽。
radio 定义单选按钮。
range 定义带有 slider 控件的数字字段。
reset 定义重置按钮。重置按钮会将所有表单字段重置为初始值。
search 定义用于搜索的文本字段。
submit 定义提交按钮。提交按钮向服务器发送数据。
tel 定义用于电话号码的文本字段。
text 默认。定义单行输入字段，用户可在其中输入文本。默认是 20 个字符。
url 定义用于 URL 的文本字段。
42、可以继承和不可以继承的

https://www.cnblogs.com/thislbq/p/5882105.html

43、自动类型转换

①为任意的数据类型“10”+3即可将其转换成String字符串类型，这是一种隐式类型转换，由浏览器自动完成，实际上也是调用String()函数。

②为任意的数据类型 “103”-“1” 即可将其转换成Number数值类型。

44、回流触发

首先早知道reflow是什么？ reflow(回流)是指浏览器为了重新渲染部分或者全部的文档,重新计算文档中的元素的位置和几何构造的过程。 因为回流可能导致整个Dom树的重新构造,所以是性能的一大杀手。 以下操作会引起回流：

① 改变窗口大小

② font-size大小改变

③ 增加或者移除样式表

④ 内容变化（input中输入文字会导致）

⑤ 激活CSS伪类（:hover）

⑥ 操作class属性，新增或者减少

⑦ js操作dom

⑧ offset相关属性计算

⑨ 设置style的值 …… 另外: reflow与repaint（重绘）是减缓js的几大主要原因，尤其是reflow更是性能杀手，所以我们应该想法避免。

45、Vue.js具备的特性

指令和过滤器

46、Canvas和SVG的区别

  • Canvas产生的dom数量比SVG要少

  • SVG可以使用css设置动画样式，但是Canv as不能用css设置动画样式

  • canvas 中绘制的元素不可以通过浏览器提供的接口获取到。SVG可以通过浏览器提供的接口获取到。

    SVG与Canvas的区别
    SVG
    不依赖分辨率
    支持事件绑定
    大型渲染区域的程序(例如百度地图)
    不能用来实现网页游戏
    Canvas
    依赖分辨率
    不支持事件绑定
    最合适网页游戏
    保存为”.jpg”格式的图片

47、XML说法

  • Xml一般用于传输和存储数据，是对html的补充，两者的目的不同

  • 在JavaScript里解析和处理xml数据时，因为浏览器的不同，其做法也不同

  • 在IE浏览器里处理xml，首先需要创建ActiveXObject对象

48、jquery想找所有元素的同辈元素

siblings([expr])同辈，find([expr])后辈，eq第几个，next()下一个

49、<i>``<em>标签语义表示

<i>标签只是单纯的样式标签，表现斜体的样式，但是语义上与普通文本无异；<em>标签在样式上表示为斜体，同时在语义上也表示为斜体。<em>标签可以被设备识别，而<i>标签不能被识别。

50、使用link和@import有什么区别

1.从属关系区别 @import是 CSS 提供的语法规则，只有导入样式表的作用；link是HTML提供的标签，不仅可以加载 CSS 文件，还可以定义 RSS、rel 连接属性等。

2.加载顺序区别 加载页面时，link标签引入的 CSS 被同时加载；@import引入的 CSS 将在页面加载完毕后被加载。

3.兼容性区别 @import是 CSS2.1 才有的语法，故只可在 IE5+ 才能识别；link标签作为 HTML 元素，不存在兼容性问题。

4.DOM可控性区别 可以通过 JS 操作 DOM ，插入link标签来改变样式；由于 DOM 方法是基于文档的，无法使用@import的方式插入样式。

5.权重区别 link引入的样式权重大于@import引入的样式。

51、JS的RegExp对象方法

JavaScript RegExp 对象有 3 个方法：test()、exec() 和 compile()。

  1. test() 方法用来检测一个字符串是否匹配某个正则表达式，如果匹配成功，返回 true ，否则返回 false；
  2. exec() 方法用来检索字符串中与正则表达式匹配的值。exec() 方法返回一个数组，其中存放匹配的结果。如果未找到匹配的值，则返回 null；
  3. compile() 方法可以在脚本执行过程中编译正则表达式，也可以改变已有表达式。

注：match是支持正则表达式的String对象的方法

52、Javascript的全局函数

编码相关：

escape()、unescape()、encodeURI()、decodeURI()、

encodeURIComponent()、decodeURIComponent()

数据处理：

Number()、String()

数字相关：

isFinite()、isNaN()、parseFloat()、parseInt()

特殊：

eval()

ps:对于 getClass() 方法。

53、判断是不是数组对象
1
2
3
4
5
6
let arr = [1,2,3]
Array.isArray()

arr instanceof Array

Object.prototype.toString.call([1,2,3])  /*比较推荐这个,因为准备吧*/
54、input元素在html5中新增了哪些type属性

在HTML5中，为input元素新增了以下一些type属性值：

  • color：用于指定颜色的控件。
  • date：用于输入日期的控件（年，月，日，不包括时间）。
  • month：用于输入年月的控件，不带时区。
  • week：用于输入一个由星期-年组成的日期，日期不包括时区
  • time：用于输入不含时区的时间控件。
  • datetime：基于UTC时区的日期时间输入控件（时，分，秒及几分之一秒）。
  • datetime-local：用于输入日期时间控件，不包含时区。
  • email：用于应该包含 e-mail 地址的输入域。在提交表单时，会自动验证 email 域的值。
  • number: 用于应该包含数值的输入域。只能输入数字
  • range：用于应该包含一定范围内数字值的输入域。range 类型显示为滑动条。
  • search：用于输入搜索字符串的单行文本字段。换行会被从输入的值中自动移除。
  • tel：用于输入电话号码的控件。在移动端输入会显示数字键盘，PC端无效果
  • url：用于编辑URL的字段。
55、设置不同屏幕中，元素的位置不会发生改变的是（）

使用 @media screen查询，你可以针对不同的媒体类型定义不同的样式。

@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。

当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。

56、实现翻书的效果可以使用css3里的什么方法

A、rotateY：定义沿 Y 轴的 3D 旋转，可实现翻书的效果

B、translateY：沿着 Y 轴移动元素

C、scaleY：定义 2D 缩放转换时，改变元素的高度；定义 3D 缩放转换时，通过给定一个 Y 轴的值

D、perspective(n)：改变3D元素是怎样查看透视图（注：只影响 3D 转换元素）

57、H5中常用的新特性

HTML5中常用的新特性：

canvas元素：用于定义图形（图表等），只是图形容器，必须使用脚本来绘制图形。

audio：用于音频播放。

video：用于视频播放。

article：规定独立的自包含内容。

header：定义文档的页眉，介绍相关信息。

section：定义文档中的节。

footer：定义文档的页脚，通常有文档的作者、版权信息、联系方式等。

nav：定义导航链接。

表单控件：

calender

date

time

email

url

search

58、在文件/home/somebody/workspace/somemodule.js中第一行引用了一个模块：require(‘othermodule‘)，请问required 的查找模块的顺序

A. /home/somebody/workspace/node_modules/othermodule/index.js
B. /home/somebody/workspace/node_modules/othermodule. Js
C.CORE MODULES named othermodule
D./home/somebody/node_modules/othermodule/index.js

解析：(1):首先，Node在当前目录下查找package.json(CommonJS包规范定义的包描述文件)，通过JSON.parse()解析出包描述对象，从中取出main属性指定的文件名进行定位。如果文件缺少扩展名，将会进入扩展名分析的步骤。 　　

(2):而如果main属性制定的文件名错误，或者压根没有package.json文件，Node会将index当做默认文件名，然后依次查找index.js、index.node、index.json. 　　

(3):如果在目录分析的过程中没有定位成功任何文件，则自定义模块进入下一个模块路径进行查找。如果模块路径数组都被遍历完毕，依然没有查找到目标文件，则会抛出查找失败异常。 　　按照上面的思路，首先应该查找package.json文件，看看里面有没有核心模块，应该是C最先，othermodule不是核心模块，那么接着应该进入扩展名分析的步骤，就应该是查找othermodule. js，对应B，紧接着就是以index为默认文件名，也就是A，再接下来就是上一个文件目录D了，
所以答案是： C B A D

59、嵌入在HTMl文档中的图像格式是

网页html文档支持的图片格式有jpg ， gif , png 和 bmp 这四种，jpg ， gif 和 png 格式的图片特点是体积很小，因为在网上很常见，然而 bmp就不常见了，因为这种格式虽然很清晰色彩丰富，但是所占内存很大，所以很少见，但是也是支持的。一共这4种

60、bootstrap中如何让一个区块居中?

center、center-block

center是指<center></center>标签,center-block是bootstrap的样式 .center-block

61、行内块标签

行内元素典型代表 span ,a, ,strong , em, del, ins

特点：★在一行上显示

★不能直接设置宽高

★元素的宽和高就是内容撑开的宽高。

行内块元素（内联元素）典型代表 input img

特点：★在一行上显示

★可以设置宽高

块元素典型代表,div,h1-h6,p,ul,li

特点: ★独占一行

★可以设置宽高

★ 嵌套（包含）下，子块元素宽度（没有定义情况下）和父块元素宽度默认一致。

62、this的问题

this的行为有时候会显得极其诡异，让人感到困惑，但只需要记住 this的值要等到代码真正执行时才能确定
同时this的值具体有以下几种情况：

  1. new 调用时指的是被构造的对象
  2. call、apply调用，指向我们指定的对象
  3. 对象调用，如执行obj.b()，this指向obj
  4. 默认的，指向全局变量window(相当于执行window.fun())

这样看来，当你执行fun()的时候，以上1,2点均不满足。
第3点,因为this是运行时确定的，而我们执行fun()，等同于windown.fun()(与obj没有任何关系)，自然的this指向window，而window没有定义变量a，结果是undefined。

63、如何使用css 选择器定义某个父元素中所有第”奇数”个子元素的样式：

nth-child(odd) ：定义某个父元素中所有第”奇数”个子元素的样式

nth-of-type(odd) ：定义某个父元素中的不同类型中的所有第”奇数”个子元素的样式

nth-child(odd) 奇数 ,nth-child(even) 偶数。

nth-child(n) : 匹配父元素中的第 n 个子元素，元素类型没有限制。

64、哪个元素创建了一组选项

<optgroup>

65、哪些方法可以用作javascript异步模式的编程

先解释一下“同步模式”和“异步模式”：
（1）同步模式：就是后一个任务等待前一个任务结束，然后再执行，程序的执行顺序与任务的排列顺序是一致的、同步的。
（2）异步模式：完全不同，每一个任务有一个或多个回调函数（callback），前一个任务结束后，不是执行后一个任务，而是执行回调函数，
后一个任务则是不等前一个任务结束就执行，所以程序的执行顺序与任务的排列顺序是不一致的、异步的。
JavaScript中实现异步编程模式的4种方法,回调函数、事件监听、发布/订阅、Promises对象：
（1）回调函数：这是异步编程最基本的方法，优点是简单、容易理解和部署，缺点是不利于代码的阅读和维护，各个部分之间高度耦合
（Coupling），流程会很混乱，而且每个任务只能指定一个回调函数。
例：假定有两个函数f1和f2，后者等待前者的执行结果，如果f1是一个很耗时的任务，可以考虑改写f1，把f2写成f1的回调函
数。
（2）事件监听：任务的执行不取决于代码的顺序，而取决于某个事件是否发生。优点是比较容易理解，可以绑定多个事件，每个事件可以指定
多个回调函数，而且可以”去耦合”（Decoupling），有利于实现模块化。缺点是整个程序都要变成事件驱动型，运行流程会变
得很不清晰。
例：为f1绑定一个事件，当f1发生done事件，就执行f2。
（3）发布/订阅：我们假定，存在一个”信号中心”，某个任务执行完成，就向信号中心”发布”（publish）一个信号，其他任务可以向信号中心”订
阅”（subscribe）这个信号，从而知道什么时候自己可以开始执行。这就叫做”发布/订阅模式”（publish-subscribe pattern），
又称”观察者模式”（observer pattern）。
这种方法的性质与”事件监听”类似，但是明显优于后者。因为我们可以通过查看”消息中心”，了解存在多少信号、每个信号
有多少订阅者，从而监控程序的运行。
（4）Promises对象：是CommonJS工作组提出的一种规范，目的是为异步编程提供统一接口。简单说，它的思想是，每一个异步任务返回一个
Promise对象，该对象有一个then方法，允许指定回调函数。回调函数变成了链式写法，程序的流程可以看得很清楚，而
且有一整套的配套方法，可以实现许多强大的功能。
例：f1的回调函数f2，f1().then(f2);

66、Ajax和Flash的优缺点

引用：http://www.awflasher.com/blog/archives/503
Ajax的优势

可搜索性
普通的文本网页会更有利于SEO。文本内容是搜索引擎容易检索的，而繁琐的swf字节码却是搜索引擎不愿触及的。虽然Google等一些大型的搜索引擎可以检索SWF内部的内容，但是仍然有很多麻烦存在。

开放性
Flash常年以来被Macromedia看的很死。包括Flex、FMS等辅佐技术一直都需要昂贵的安装、维护费用。而JS则没有这样的麻烦。没有人愿意承担法律和版权的风险。

费用
Flash开发是很昂贵的，因为FlashIDE等环境都是要收费的．而Ajax则不同．虽然有一些便宜的生成swf的工具，但是他们的工能实在无法满足复杂需求。

易用性
Ajax程序有更好的易用性。由于中间有一层Flashplayer***层，因此许多辅助功能无法被Flash灵活利用。而且Flash在一些方面有着不好的口碑。比如弹出广告、比如恶意代码。
（awflasher.com个人认为这八成是乱上xx网站造成的）

易于开发
人们开发复杂的Ajax和Flash应用程序时，都会借助一些高级的开发工具。普遍来说，Ajax的开发包比Flash简便、容易。

Flash的优势
多媒体处理
Flash在音频、视频等多媒体领域相比HTML有绝对的优势。现在几乎所有的网站都包含有Flash内容。

兼容性
兼容性好：由于通过了唯一的FlashPlayer“***”。人们不必像调试JS那样，在不同的浏览器中调试程序。

矢量图型
这是Flash最大的优势，同样处在这一领域的SVG、Canvas element以及Direct完全不能与Flash相比。

客户端资源调度
Flash能够更容易的调用浏览器以外的外部资源。比如摄像头、麦克风等。然而这是普通的HTML无法完成的。但是这也许是一个缺点（为什么呢？）

67、ele.clientWidth = 宽度 + padding

ele.offsetWidth = 宽度 + padding + border

ele.scrollTop = 被卷去的上侧距离

ele.scrollHeight = 自身实际的高度（不包括边框）

68.关于BFC

在一个Web页面的CSS渲染中，块级格式化上下文 (Block Fromatting Context)是按照块级盒子布局的。W3C对BFC的定义如下：

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

为了便于理解，我们换一种方式来重新定义BFC。一个HTML元素要创建BFC，则满足下列的任意一个或多个条件即可：

1、float的值不是none。
2、position的值不是static或者relative。
3、display的值是inline-block、table-cell、flex、table-caption或者inline-flex
4、overflow的值不是visible

BFC是一个独立的布局环境，其中的元素布局是不受外界的影响，并且在一个BFC中，块盒与行盒（行盒由一行中所有的内联元素所组成）都会垂直的沿着其父元素的边框排列。

javascript、css、html
笔试

本博客所有文章除特别声明外，均采用 CC BY-SA 4.0 协议 ，转载请注明出处！