@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.返回值为布尔值;
- 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