面试总结一

面试总结一

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;

属性值 属性值说明
content-box 默认值,其让元素维持W3C的标准盒模型,也就是说元素的宽度和高度(width/height)等于元素边框宽度(border)加上元素内距(padding)加上元素内容宽度或高度(content width/ height),也就是element width/height = border + padding + content width / height
border-box 重新定义CSS2.1中盒模型组成的模式,让元素维持IE传统的盒模型(IE6以下版本和IE6-7怪异模式),也就是说元素的宽度或高度等于元素内容的宽度或高度。从上面盒模型介绍可知,这里的内容宽度或高度包含了元素的border、padding、内容的宽度或高度(此处的内容宽度或高度=盒子的宽度或高度—边框—内距)。
inherit 使元素继承父元素的盒模型模式

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 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浏览器控制台输出的效果如下图所示: image

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浏览器控制台输出的效果如下图所示: image

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浏览器控制台输出的效果如下图所示: image

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浏览器控制台输出的效果如下图所示: image

简单得回忆一下:

  • 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
面试  基础  js