大管家前端线上笔试

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、为什么选择前端开发?

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Cirrod

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值