面试总结一

box-sizing 常用的属性有哪些？分别什么作用？

我们平时用div的盒子理论时，定义的 width 只为 content 内容。但是并不包括周边的 border 和 padding 部分。

那么如果我们想直接对整个盒子进行设置布局就可以使用 box-sizing 了。

- 语法：box-sizing: content-box（默认） | border-box | inherit;

- 例如：上面我们想要一个宽度为200px的盒子，那么我们直接设置宽度为200px。是不是看起来清晰多了。当再设置它的左右边框和左右补白后，它的内容区会自动调整。这可能更直接和一目了然。CSS代码如下：

div {
    box-sizing: border-box;
    width: 200px;
    padding: 20px;
    border: 1px solid #DDD;
}

如上那么它的实际 content 内容得 width 就为 158px;

CSS 隐藏元素的几张方法；

1. display，使用none值会让元素从文档中直接删除，”直接消失不见了”

用法：display:none

优点：简单暴力，不需要多余代码。不占空间，对布局没影响。

缺点：元素从文档删除，不利于seo。

2. text-indent，一般是首行缩2个中文字的用法是text-indent:2em。但当给他一个足够大的负值，大到一般我们浏览器无法显示。

text-indent 属性规定文本块中首行文本的缩进。

text-indent: length （定义固定的缩进。默认值：0。） | % |inherit

用法：text-indent:-999em

优点：利于搜索引擎

缺点：它的作用其实就是把文字提到段落前面，不让我们看见，不影响宽度

3. position，假如说一个元素的距离我们的视窗（电脑显示屏幕）足够大，大到我们浏览器也无法显示出来，那么它也是“消失”的。但是这种做法一般适用于比较写死的东西。

用法：position:absolute; top:-999em或者left:-999em 或 position:absolute; visibility:hidden;

优点：信手拈来，随意摆放

缺点：用法太死，不能随意修改，比较死板。

4. visibility，只是“看不见”而已，所以元素依然会影响到布局

用法：visibility:hidden

优点：利于SEO优化

缺点：该属性会继承，假如祖先用了visibility:hidden，那么子元素也是直接显示不见，想要子元素显示让用户看见，还要必须再多写visibility：visible

页面导入样式时，使用 link 和 @import 有什么区别？

 <link rel="stylesheet" href="yellow.css">
    
    <style type="text/css">
        @import url("green.css");
    </style>

区别：

1. 老祖宗的差别：

link属于XHTML标签，而@import完全是CSS提供的一种方式。link标签除了可以加载CSS外，还可以做很多其它的事情，比如定义RSS，定义rel连接属性等，@import就只能加载CSS了。

2. 加载顺序的差别：

当一个页面被加载的时候（就是被浏览者浏览的时候），link引用的CSS会同时被加载，而@import引用的CSS 会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式（就是闪烁），网速慢的时候还挺明显（梦之都加载CSS 的方式就是使用@import，一边下载一边浏览梦之都网页时，就会出现上述问题）。

3. 兼容性的差别：

由于@import是CSS2.1提出的所以老的浏览器不支持，@import只有在IE5以上的才能识别，而link标签无此问题。

4. 使用dom控制样式时的差别：

当使用javascript控制dom去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的。

js 中 typeof 返回哪些数据?

1. number
2. undefined
3. boolean
4. string
5. object
6. function

说明下数组方法pop(); push(); unshift(); shift();

1. push()方法

该方法是向数组末尾添加一个或者多个元素，并返回新的长度。

var arr = []; //创建一个空数组
console.log(arr); // []
console.log("入栈"); // 入栈
arr.push(1); // 将1添加到数组arr中
console.log(arr); // [1]
arr.push(2); //将2添加到数组arr中
console.log(arr); //[1,2]
arr.push([3,4]); // 将数组[3,4]添加到arr中
console.log(arr); // [1,2,[3,4]]
console.log(arr.length); // 3

Chrome浏览器控制台输出的效果如下图所示：

2. pop()方法

pop()方法刚好和push()方法相反。pop()方法删除数组的最后一个元素，把数组的长度减1，并且返回它被删除元素的值，如果数组变为空，则该方法不改变数组，返回undefine值。

var arr = [1,2,3,4]; //创建一个数组
console.log(arr); // [1,2,3,4]
console.log(arr.length); // 4
console.log("出栈，后进先出"); // 出栈，后进先出
arr.pop();
console.log(arr); //  // [1,2,3]
arr.pop();
console.log(arr); // [1,2]
arr.pop();
console.log(arr); // [1]
arr.pop();
console.log(arr); // []

Chrome浏览器控制台输出的效果如下图所示：

3. unshift()方法

unshift()方法是向数组的开头添加一个或多个元素，并且返回新的长度。

unshift() 和 pop()

可以从相反的方向来模拟队列，即在数组的前端添加数组项，从数组末端移除数组项。

var arr = []; //创建一个空的数组
console.log(arr); // []
console.log("入队"); // 入队
arr.unshift(1,2,3,4); // 将1,2,3,4推入到数组arr
console.log(arr); // [1,2,3,4]
console.log(arr.length); // 4

Chrome浏览器控制台输出的效果如下图所示：

4. shift()方法

shift()方法和unshift()方法恰恰相反。该方法用于把数组的第一个元素从其中删除，并返回被删除的值。如果数组是空的，shift()方法将不进行任何操作，返回undefined的值。

var arr = [1,2,3,4]; // 创建一个数组
console.log(arr); // [1,2,3,4]
arr.shift(); // 取得第一项
console.log(arr); // [2,3,4]
arr.shift(); // 取得第一项
console.log(arr); // [3,4]
arr.shift(); // 取得第一项
console.log(arr); // [4]
arr.shift(); // 取得第一项
console.log(arr); // []

Chrome浏览器控制台输出的效果如下图所示：

简单得回忆一下：

• push()方法可以在数组的末属添加一个或多个元素
• shift()方法把数组中的第一个元素删除
• unshift()方法可以在数组的前端添加一个或多个元素

• pop()方法把数组中的最后一个元素删除

  实现类似栈的行为

  将push()和pop()结合在一起，我们就可以实现类似栈的行为：

//创建一个数组来模拟堆栈
var a=new Array();
console.log(a);
//push: 在数组的末尾添加一个或更多元素，并返回新的长度
console.log("入栈");
a.push(1)
console.log(a);//----->1
a.push(2);
console.log(a);//----->1,2
a.push(3);
console.log(a);//----->1,2,3
a.push(4);
console.log(a);//----->1,2,3,4
console.log("出栈，后进先出");
console.log(a);
//pop：从数组中把最后一个元素删除，并返回这个元素的值
a.pop();//----->4
console.log(a);
a.pop();//----->3
console.log(a);
a.pop();//----->2
console.log(a);
a.pop();//----->1
console.log(a);

实现类似队列的行为

将shift()和push()方法结合在一起，可以像使用队列一样使用数组。即在数组的后端添加项，从数组的前端移除项：

//创建一个数组来模拟队列
var a=new Array();
console.log(a);
//push: 在数组的末尾添加一个或更多元素，并返回新的长度
console.log("入队");
a.push(1)
console.log(a);//----->1
a.push(2);
console.log(a);//----->1,2
a.push(3);
console.log(a);//----->1,2,3
a.push(4);
console.log(a);//----->1,2,3,4
console.log("出队，先进先出");
console.log(a);
//shift：从数组中把第一个元素删除，并返回这个元素的值
a.shift();//----->1
console.log(a);
a.shift();//----->2
console.log(a);
a.shift();//----->3
console.log(a);
a.shift();//----->4
console.log(a);

null 和 undefined 的区别

null表示”没有对象”，即该处不应该有值。典型用法是：

1. 作为函数的参数，表示该函数的参数不是对象。

2. 作为对象原型链的终点。

Object.getPrototypeOf(Object.prototype)
// null

undefined表示”缺少值”，就是此处应该有一个值，但是还没有定义。典型用法是：

1. 变量被声明了，但没有赋值时，就等于undefined。
2. 调用函数时，应该提供的参数没有提供，该参数等于undefined。
3. 对象没有赋值的属性，该属性的值为undefined。
4. 函数没有返回值时，默认返回undefined。

var i;
i // undefined

function f(x){console.log(x)}
f() // undefined

var  o = new Object();
o.p // undefined

var x = f();
x // undefined