无聊时刷的面试题（错题本）

• CSS中四种定位

absolute

生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。

元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。

fixed

生成固定定位的元素，相对于浏览器窗口进行定位。

元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。

relative
生成相对定位的元素，相对于其正常位置进行定位。

因此，“left:20” 会向元素的 LEFT 位置添加 20 像素。

static
默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
inherit 规定应该从父元素继承 position 属性的值。

• ++运算符的理解和闭包的理解

function Foo() {
    var i = 0;
    return function() {
        console.log(i++);
    }
}

var f1 = Foo(),
    f2 = Foo();
f1();
f1();
f2();

分别输出0,1,0；这里涉及到的js知识点也不是很深，主要就是++运算符的理解和闭包的理解。首先Foo函数返回的也是一个函数，即function(){ console.log(i++),而这个函数的i引用的是外层函数的i，形成闭包，使得i的初始值为0。

var f1 = Foo( ),f2 = Foo( )这一句，前半句var f1 = Foo( )可以看做是var f1 =
function( ){ console.log(i++)},。那么第一次执行f1的时候，自然是输出0，这里主要理解的是++运算符的使用，放在数字后表示后增，即先执行再+1，这里就是先执行console.log（i）之后i再加1，所以f1执行第二次的时候i已经变成了1，自然就输出1了。

后半句f2 = Foo() 可以看做是f2 = function( ){console.log(i++)}，这没什么可说的，直接输出i的初始值0.

• 全局变量和局部变量

var bb = 1;
function aa(bb) {
    bb = 2;
    alert(bb);
};
aa(bb);
alert(bb);

函数体内，bb并没有使用var来定义，按理说这个bb在预处理的时候应该是window的属性。但在这里，函数声明的时候，带了一个参数bb，也就是相当于在函数体内声明了var bb。所以，函数里的bb就是函数活动对象的属性。所以函数执行时会输出2。函数执行完后，函数的活动对象被销毁，也就是局部的这个bb被删除了，执行流进入到window，再输出bb，值就是1了。
没有使用var 等关键字声明的变量会被当成是window全局变量，比如 a=1

• 知识点！！

1.<!DOCTYPE> 声明位于文档中的最前面，处于html标签之前。告知浏览器的解析器，用什么文档类型 规范来解析这个文档。

2.严格模式的排版和 JS 运作模式是 以该浏览器支持的最高标准运行。在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。

3.DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。

4.浏览器的内核引擎，基本上是四分天下：
1）Trident: IE 以Trident 作为内核引擎；
2）Gecko: Firefox 是基于 Gecko
开发；
3）WebKit: Safari, Google Chrome,傲游3,猎豹浏览器,百度浏览器 opera浏览器；
4）Presto : Opera的内核，但由于市场选择问题，主要应用在手机平台–Opera mini

注：2013年2月Opera宣布转向WebKit引擎

注：2013年4月Opera宣布放弃WEBKIT，跟随GOOGLE的新开发的blink引擎
5.p元素不能包括任何块级元素，包括自身
6. a标签可以包括任何元素，除了自身
7. ul里面只能放li标签，如果想要其他标签则必须被包含在li标签里面
8.块级元素可以包含内联元素或某些块级元素，但内联元素不能包含块级元素，它只能包含其它内联元素。
9.box-sizing默认情况只width只包含content的内容
10.padding不允许为负值
11.两个相邻块级元素垂直方向的 margin 可能会合并，水平方向不会
12.div固定宽高，超出后会溢出，不设置宽高，超出后会自动拓展

13.display没有hidden的属性

14.display:none与visibility: hidden有什么区别？
都是看不见元素，但是display:none意思是不展示这个元素，该元素不占据空间，
而visibility: hidden只是将该元素隐藏了，只是用户不可见而已，占据页面空间
15.网页html文档支持的图片格式有jpg，gif ， png 和 bmp 这四种，jpg，gif 和 png 格式的图片特点是体积很小，因为在网上很常见，然而 bmp就不常见了，因为这种格式虽然很清晰色彩丰富，但是所占内存很大，所以很少见，但是也是支持的。一共这4种。

• ES6变量声明

(单选题)
关于ES6声明变量，以下哪个代码段不会报错（）

A
const a;
B
let a = 1;
let a = 2;
C
var a = 1;
var a = 2;
D
{
let a = 1;
}
var b = a;

A const必须在定义时赋值
B let和const不能重复定义
D let,const 区块作用域

• ES6解构

关于ES6解构表达式
let [a,b, c,d, e] = "hello"; 
描述正确的是（）
A. e = "hello";其它都为undefined
B. 当中 a = "h", b = "e";
C. 语法报错
正确答案: B

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

const [a, b, c, d, e] = ‘hello’; a // “h” b // “e” c // “l” d // “l” e // “o”
类似数组的对象都有一个length属性，因此还可以对这个属性解构赋值。

let {length : len} = ‘hello’; len // 5

• http状态码

Http请求返回码（status code）中，代表[未授权的请求]的代码是401

跨域，script脚本 defer和async 属性，promise执行顺序，同步异步任务（自己查资料填）

• this指向问题

Tom
Tom
undefined
Michael
Person { name: 'Michael' }

使用new操作符时，构造函数内的this就指向相应的实例化对象；
未使用new操作符时，为普通函数调用，全局函数内的this指向window。

所以语句 var a = Person(‘Tom’) 将全局范围内的name变量改成了 Tom，故第二行输出为Tom。
Person(“Tom”) 相当于只是执行Person函数，里面没有返回值，所以console.log(a)输出undefined。

• 严格模式

"use strict"声明以严格模式执行

输出：“Michael”
解释：这里是person.pro调用了getName(),getName()里面的this指向了person.pro,所以这里的this.name == “Michael”

输出：error报错
解释：将person.pro.getName方法赋给了pepole,然后在全局执行上下文中调用了pepole(),因为是在严格模式下执行，所以pepole()里面的this是指向undefined,undefined又获取name属性，最后导致报错

• 请用 HTML+CSS 实现一个定宽定高元素在容器中的水平和垂直居中。

// flex实现
.father{
                display: flex;
                justify-content: center;
                align-items: center;
            }
// 利用绝对布局
.father{
                position: relative;
            }
            .son{
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%, -50%);
            }
// 同绝对布局
.father{
                position: relative;
            }
            .son{
                position: absolute;
                left: 0;
                top: 0;
                right: 0;
                bottom: 0;
                margin: auto;
            }

ajax的请求头设置文字编码（上传文件）

MDN文档里canvas优化

• CSS文字溢出

//不换行也不省略 ： 
word-break : keep-all;
white-space : nowrap;  
//不换行，超出用省略号代替 : 
word-break : keep-all;
white-space : nowrap;
overflow : hidden;
text-overflow : ellipsis;

清除浮动的方法，原理

清除浮动方法原理

H5版本中新提出的表单控件

1.电子邮件

<input type="email">//表单提交时，会验证数据是否符号email的规范（有@，并且@后面有内容）

2.搜索类型

<input type="search">//提供了快速清除的功能

3.url类型

<input type="url">//提交时，验证数据是否符合url的规范（http://****）

4.电话号码类型

<input type="tel">//在移动设备中，显示拨号键盘

5.数字类型

<input type="number">
//属性：

//value 默认显示的值
//max 能接收到的最大值
//min 能接收到的最小值
//step 每次调整数字时，步数大小

6.范围类型

<input type="range">//提供一个滑块组件，允许用户选取指定范围的值
//属性：

//value 默认显示的值
//max 最大值
//min 最小值
//step 步长

7.颜色类型

<input type="color">//提供一个颜色拾取器

8.日期类型

<input type="date">

9.月份类型

<input type="month">

10.周类型
<input type="week">

form 元素的enctype属性

• enctype属性在get请求中会被忽略，在post请求中才有效

• application/x-www-form-urlencoded表示会对特殊字符进行转义

• text/plain 以文本的形式进行编码，不会对特殊字符进行编码

• multipart/form-data向服务器发送二进制文件的时候有用，例如提交文件！！！

• CSS相关

下面哪一个属于 CSS 命名规范 （）
A. PostCSS
B. BEM
C. Less
D. Sass
正确答案: B

这题不是让判断四个选项命名是否规范，而是考察知识广度。
PostCSS：转换CSS的工具
BEM：命名规范block-name__element-name–modifier-name，也就是模块名 + 元素名 + 修饰器名，以保证命名不会冲突
LESS、SASS都是CSS预处理器

以下表达式值为 true 的是（）
A. "9" < "10"
B.NaN == NaN
C.String('a') === 'a'
D.typeof [] === 'array'
正确答案: C

A选项比的是字符编码
B的NaN代表的是一个本来要返回数值的操作数未返回数值，它与任何值都不相等
D tyeof操作符检不出来array，可以用 Array.isArray()来判断是否为 array，typeof 只会返回 number, object, string, undefined, symbol, boolean 以及 function

• 模块规范

在 ES6 之前，业界流行的是社区制定的一些模块加载方案，如 CommonJS 和 AMD 。而 ES6 Module 作为官方规范，且浏览器端和服务器端通用，未来一定会一统天下，但由于 ES6 Module 来的太晚，受限于兼容性等因素，可以预见的是今后一段时期内，多种模块化方案仍会共存。
ES6 Modue 规范：JavaScript 语言标准模块化方案，浏览器和服务器通用，模块功能主要由 export 和 import 两个命令构成。export 用于定义模块的对外接口，import 用于输入其他模块提供的功能。
CommonJS 规范：主要用于服务端的 JavaScript 模块化方案，Node.js 采用的就是这种方案，所以各种 Node.js 环境的前端构建工具都支持该规范。CommonJS 规范规定通过 require 命令加载其他模块，通过 module.exports 或者 exports 对外暴露接口。
AMD 规范：全称是 Asynchronous Modules Definition，异步模块定义规范，一种更主要用于浏览器端的 JavaScript 模块化方案，该方案的代表实现者是 RequireJS，通过 define 方法定义模块，通过 require 方法加载模块。

• Cookie和Session

如果不定义cookie的过期时间，那么cookie 的过期时间就会是会话期间，也就是说，此时的cookie是和sesstion等效的，唯一的不同是此种cookie是存储在客户端的内存中，Session是存储在服务器端的内存中

• Jquery中的ajax支持的数据类型

• typeof操作符，instanceof操作符

JS中值的类型分为原始值类型和对象类型。原始值类型包括 number, string, boolean, null 和 undefined；对象类型即 object。首先原始值类型它就不是对象。
另外，要注意 ‘hello’ 和 new String(‘hello’) 的区别，前者是字符串字面值，属于原始类型，而后者是对象。用 typeof 运算符返回的值也是完全不一样的：

typeof 'hello';  // 'string'
typeof new String('hello');  // 'object'

之所以很多人分不清字符串字面值和 String 对象，归根结底就是 JS 的语法对你们太过纵容了。当执行 ‘hello’.length 时，发现可以意料之中的返回 5，你们就觉得 ‘hello’ 就是 String 对象，不然它怎么会有 String 对象的属性。其实，这是由于 JS 在执行到这条语句的时候，内部将 ‘hello’ 包装成了一个 String 对象，执行完后，再把这个对象丢弃了，这种语法叫做 “装箱”，在其他面向对象语言里也有（如 C#）。不要认为 JS 帮你装箱了，你就可以在写代码的时候不分箱里箱外了！

1.操作符

（1）typeof操作符

格式：result=typeof variable

返回值：

undefined 值未定义

boolean 布尔值

string 字符串

number 数值

object 对象、null

function 函数


（2）instanceof操作符

格式：result=variable instanceof constructor

返回值：

true

false

• 常用的浏览器端储存技术

cookie 是靠谱的浏览器都支持；
localStorge 比 cookie存的更多，获取更方便，而且存储内容不会随请求发送给服务器；
session 虽然需要 cookie 支持（通常存放加密过的
sessionId），但是不在浏览器端存放主要信息，排除；
IE 支持 userData存储数据，但是基本很少使用到，除非有很强的浏览器兼容需求。

• 置换元素

a) 置换元素：浏览器根据元素的标签和属性，来决定元素的具体显示内容。 
例如：浏览器会根据<img>标签的src属性的值来读取图片信息并显示出来，
而如果查看(x)html代码，则看不到图片的实际内容；
<input>标签的type属性来决定是显示输入框，还是单选按钮等。 
(x)html中的<img>、<input>、<textarea>、<select>、<object>
都是置换元素。这些元素往往没有实际的内容，即是一个空元素。
置换元素在其显示中生成了框，这也就是有的内联元素能够设置宽高的原因。
b) 不可替换元素：(x)html 的大多数元素是不可替换元素，
即其内容直接表现给用户端（如浏览器）。
例如： <label>label中的内容</label> 标签<label>是一个非置换元素，
文字label中的内容”将全被显示

• 标准盒子模型和IE盒子模型

• 排序算法

不稳定：快选堆希

稳 定：插冒归基

js里面没有函数重载的概念，在其他语言中（如java）java中，可以存在同名函数，
只要传入的参数数量或者类型不同即可。在js中，定义了两个同名函数后，
后面的函数会覆盖前面定义的函数。结合这道题来说，由于函数声明提升，
所以函数声明会提前，由于存在同名函数，后面的add函数将覆盖第一个add函数，
所以两次调用add()返回的值是相同的。也就是y,z都为4.