大管家前端线上笔试

1.盒子模型？

盒子模型：我们把网页中的各个部分都看成一个盒子，盒子由外到内包括外边距（margin）、边框（border）、内边距（padding）、内容（content）

两种盒子模型：

标准盒子模型(默认盒子模型)：width=boder+padding+content，盒子大小会受boder和padding的影响从而盒子变大或者变小

box-sizing:content-box

IE盒子模型（css新增）：width=content(里面包含了boder和padding)，盒子大小不会受到boder和padding的影响，推荐使用该盒子模型

box-sizing:border-box

2.css选择器有哪些?优先级顺序？你最常用什么方式提高优先级？

css选择器：

标签选择器、类选择器、id选择器、通配符选择器、相邻选择器、后代选择器、子选择器、并集选择器、交集选择器、伪类选择器、属性选择器、伪元素选择器

优先级从大到小顺序：

！important>行内样式>id选择器>类选择器>标签选择器>通配符选择器>继承>浏览器默认属性

常用提高选择器优先级方式：

!important(不推荐)

使用嵌套选择器

类选择器改为id选择器

3、typeof和instanceof?

typeof:

typeof返回数据类型的字符串，常用于判断基本数据类型的数据

typeof 1 // 'number'
typeof '1' // 'string'
typeof undefined // 'undefined'
typeof true // 'boolean'
typeof Symbol() // 'symbol'
typeof null // 'object'
typeof [] // 'object'
typeof {} // 'object'
typeof console // 'object'
typeof console.log // 'function'

 注意：

从上面代码可以看出

• typeof null,typeof object,typeof array其实都返回object,所以当我们需要判断null的时候，直接通过===null判断就行，
• 它虽然可以判断基础数据类型（null 除外），但是引用数据类型中，除了function 类型以外，其他的也无法判断

 instanceof:

instanceof用于检测构造函数的prototype属性是否在实例对象的原型链上，返回布尔值，常用于检测复杂类型数据(不能检查基本数据类型，都是返回false)

// 定义构建函数
let Car = function() {}
let benz = new Car()
benz instanceof Car // true
//基本类型数据都返回false,无法准确判断出基本数据类型
let a='1';
let b=1
console.log(a instanceof String);//false
console.log(b instanceof Number);//false

实现原理：

function myInstanceof(left, right) {
// 这里先用typeof来判断基础数据类型，如果是，直接返回false
if(typeof left !== 'object' || left === null) return false;
// getProtypeOf是Object对象自带的API，能够拿到参数的原型对象
let proto = Object.getPrototypeOf(left);
while(true) {
if(proto === null) return false;
if(proto === right.prototype) return true;//找到相同原型对象，返回true
proto = Object.getPrototypeof(proto);
}
}

总结：

• 而typeof 存在弊端，它虽然可以判断基础数据类型（null 除外），但是引用数据类型中，除了function 类型以外，其他的也无法判断

• instanceof 可以准确地判断复杂引用数据类型，但是不能正确判断基础数据类型

如果需要准确检测数据类型，可以采用Object.prototype.toString，调用该方法，统一返回格式“[object Xxx]”的字符串

console.log(Object.prototype.toString.call(1));//[object Number]
console.log(Object.prototype.toString.call(''));//[object String]
console.log(Object.prototype.toString.call(true));//[object Boolean]
console.log(Object.prototype.toString.call(null));// [object Null]
console.log(Object.prototype.toString.call(undefined));//[object Undefined]
console.log(Object.prototype.toString.call([]));// [object Array]
console.log(Object.prototype.toString.call({}));// [object Object]
console.log(Object.prototype.toString.call(/^$/));//[object RegExp]
console.log(Object.prototype.toString.call((function () {})));//[object Function]

4、水平居中有哪几种方式？你推荐用那种？为什么？

5、数组去重有哪几种方式？

6、实现左右两侧固定，中间自适应有哪几种方式？

7、有哪几种方式获取对象的属性？

8、为什么选择前端开发？