面试题

@1: 移动端1px问题,为什么会有?如何解决?

物理像素:
移动设备出厂时,不同设备自带的不同像素,也称硬件像素;
逻辑像素:
即css中记录的像素。

解决方案一: 设置 border-image 方案

.border-image-1px {
    border-width: 1px 0px;
    -webkit-border-image: url("border.png") 2 0 stretch;
    border-image: url("border.png") 2 0 stretch;
}

解决方案一: background-image 渐变实现

.border {
      background-image:linear-gradient(180deg, red, red 50%, transparent 50%),
      linear-gradient(270deg, red, red 50%, transparent 50%),
      linear-gradient(0deg, red, red 50%, transparent 50%),
      linear-gradient(90deg, red, red 50%, transparent 50%);
      background-size: 100% 1px,1px 100% ,100% 1px, 1px 100%;
      background-repeat: no-repeat;
      background-position: top, right top,  bottom, left top;
      padding: 10px;
}

原理:将原本1个物理像素的边框大小利用线性渐变分割成几个部分(百分比控制),实现小于1像素效果。

@2:typeof和instanceof相同点与不同点

相同点:

JavaScript 中 typeof 和 instanceof 常用来判断一个变量是否为空, 或者是什么类型的。

不同点:

typeof:

1.返回值是一个字符串, 用来说明变量的数据类型。
2.typeof 一般只能返回如下几个结果: number, boolean, string, function, object, undefined。

 if (typeof a != "undefined") {
   console.log("ok");

 } eles {
    console.log("not ok");
}
下面的代码是错误的
 if (a) //因为如果 a 不存在( 未声明) 则会出错。
 if (a) {
     console.log("ok");
 } else {
     console.log('cc');

}
instanceof:

1.返回值为布尔值;

  1. instanceof 用于判断一个变量是否属于某个对象的实例。
// var a = new Array();
// alert(a instanceof Array); // true
// alert(a instanceof Object) // true
//如上, 会返回 true, 同时 alert(a instanceof Object) 也会返回 true;
// 这是因为 Array 是 object 的子类。
// alert(b instanceof Array) // b is not defined

// function Test() {};
// var a = new test();
// alert(a instanceof test) // true

你可能感兴趣的:(面试题)