【前端】前端冷知识

 转载请注明出处：http://www.cnblogs.com/shamoyuu/p/6485019.html 

 

一、浮动元素display会锁定为block

span {
    display: inline !important;
    float: right;
    height: 100px;
}

display: inline的元素是无法设置高度的，而且!important拥有最高的权重[详见此处]，那这个span元素的高度应该是auto，但是这里因为有浮动，所以元素的display被锁定为block了：

具有相同副作用的属性还有position: absolute 和 position: fixed

[原理/原因]

 

---

 

二、img下面会有一点点“缝隙”

 

从上面的左图可以看到，上面的图片和下面的橙色div之间有一条白色的缝隙。然后我们查看元素，发现这个缝隙既不是上面图片的，也不是下面div的。如果你非常小心地选中那块缝隙的话，会发现它是属于这个img的父元素。

然后搜索了一下，发现了原因如下：

vertical-align属性的默认值是baseline，就是上图红色的线，img的底部就在这条线上。这条线离下面的bottom有一定的距离，这个距离是用来书写英文一些字母底部的，比如图中的“p”字母，它的小尾巴就在baseline和bottom之间。而图片和下面元素的缝隙就是这个英文小尾巴的区域造成的。

既然了解了这个缝隙出现的原因，那就很好解决了，可以设置img的vertical-align为top、bottom、middle，或者设置img的父元素的font-size，或者line-height，原理应该很好理解吧？当然img设置为block也可以，但一般不会这么做。

 

---

 

三、不为0的opacity会触发堆栈上下文

感觉一句两句说不清楚，请移步这里看大神的解释吧。

http://www.cnblogs.com/coco1s/p/5899089.html

 

 

---

 

四、js中 x-->y “表达式”

偶然看到一种 x-->y 的写法如下

var n = 5;

while(n-->0){
    console.info(n);
}

可以正确运行不会报错

但是据我所知，js中并没有 x-->y 这样的表达式，但是代码很显然正确运行了，令我百思不得其解。

然后我按下了编辑器的代码格式化快捷键，发现它给我格式化成了这样

var n = 5;

while(n-- > 0) {
    console.info(n);
}

原来如此。。。

 

 

---

 

五、如何判断一个对象是否是数组

这个问题看似简单，实际上不简单。

var arr = [1, 2, 3];

上面这个arr对象，我们可以有很多办法判断它是不是数组

arr.constructor === Array; //true 通过构造函数判断
arr instanceof Array; //true 通过prototype判断
Array.isArray(arr); //true 通过Array类的静态方法判断
Object.prototype.toString.call(arr) === "[object Array]"; //true 通过toString方法判断

 

我们现在来创建一个不是数组的对象

var arr = [1, 2, 3];
var obj = Object.create(arr);

 

然后我们用上面3个方法判断一下

obj.constructor === Array; //true 通过构造函数判断
obj instanceof Array; //true 通过prototype判断
Array.isArray(obj); //false 通过Array类的静态方法判断
Object.prototype.toString.call(obj) === "[object Array]"; //false 通过toString方法判断

只有Array.isArray和toString方法可以正确判断，所以以后别再用其他方法了~ 

 

---

 

六、通过构造函数创建的方法，作用域属于全局

var x = 10;
var y = 30;

function foo() {
    var y = 20;

    function barFD() {
        console.info("函数声明", x, y);
    }

    var barFE = function() {
        console.info("函数定义表达式", x, y);
    };

    var barFn = new Function("console.info('构造函数', x, y);");

    barFD(); //函数声明 10 20
    barFE(); //函数定义表达式 10 20
    barFn(); //构造函数 10 30
}

foo();

 

---