闭包  2017-1-1  

简单来说，就是在函数里创建另一个函数。闭包指的是有权访问另一个函数作用域中的变量函数

    function aFunction(){
        var result = new Array();
        for(var i=0;i<10;i++){
            result[i] = function(){
                return i;
            }
        }
        return result;
    }

很明显，代码块里下划线的那里就是一个闭包。额，解释一下，我本来是想返回一个数组的，如你所见，数组里 应该从0~9的，但是我懵逼了，并不是。为啥呢？你可以把aFunction的作用域想象成我们大中国，变量i就是自己， 你说你能找到十个身份证号和你一样的人么。aFunction作用域保存的活动对象引用的是同一个i，那我们该怎么办呢？

    function aFunction(){
        var result = new Array();
        for(var i=0;i<10;i++){
            result[i] = function(num){
                return function(){
                    return num;
                };
            }(i);
        }
        return result;
    }

注意观察代码块里加粗的部分result的赋值变成了一个IIFE，里面又是一个闭包。额滴天！这个num其实就是你的 身份证复印件，函数呢是按值传递的，在i的闭包里创建了一个访问num的闭包，变相的把i给扣了下来，因为这里 的匿名函数是立即执行的，而不是上面那个要等爹(aFunction)。

z-index  2017-1-14  

上位的标志，请记住，需position。z-index属性设置元素的堆叠顺序

一个小demo：

一个标题

css代码：

    .demo-container{
        position: relative;
    }
    .demo-container>img{
        position: relative;
    }
    .demo-title{
        width: 100%;
        height: 40px;
        position: absolute;
        top: 0;
        background: blue;
        text-align: center;
        line-height: 40px;
        color: white;
    }修改

这里呢，我是想在图片上方一个标题，然后这个标题能够不占空间。然后你就看到了，我的标题呢？其实它没有被狗吃了，而是被图片 挡住了而已。通常来讲，盒模型里所有元素的z-index默认为0，浏览器会先呈现靠后的元素（后来居上）。这里我如果要显示标题的话 ，也可以更改DOM结构，但这是非常耗时且复杂的(页面元素多的话)，我们并不推荐这么做，而是选择修改元素的z-index

炫丽动画  2017-2-30  

好像有个animate.css挺厉害的，反正我知道动画不可能实现非数字效果滴。jquery的animate函数很烂，小白们少用点。

    .animate{
        background: blue;
    }
    .animate:hover{
        background: red;
        transition: 2s;
    }

上面这种效果严格来讲不是动画，css里学名叫过渡，就是从某一状态到另一状态，示例即是背景从蓝色到绿色，过渡时间是2s。 transition(有四个属性)：property duration timing-function delay; 上面我就写了个duration，其他按需则用。

    @keyframes myAnimation{
        0%{
            background: blue;
        }
        60%{
            background: white;
        }
        100%{
            background: red;
        }
    }  /*  定义一个动画  */
    .animate{
        animation: myAnimation 4s;
    }

@keyframes 动画至少需要两个帧，这两个帧跟flash里的关键帧的作用一样，缺了就用不了。它既然涉及到了动画的帧的概念，就足以 媲美以前只能用js实现的效果了。但也有人说这个不好，毕竟它混淆了css与js的界限，反正俺们管不了那么多，好用就行。@-moz/webkit/o-keyframes 兼容处理；animation(有六个属性): name duration timing-function delay iteration-count direction，太多了，懒得解释。

文本复制  2017-2-30  

总有些时候，我们不希望自己的文章被拷贝，css就是这么贴心。user-select，转载请注明出处！

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam dolorum ea expedita inventore ipsum labore magnam provident quaerat sit veritatis. A debitis ducimus expedita iste molestias officiis, porro quas tempore. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid cumque dolores harum maiores, minus omnis, quas quo quod rerum suscipit velit, voluptate voluptates? Asperiores beatae eveniet impedit iusto perspiciatis velit! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam autem excepturi illo illum ipsa laudantium magni voluptate! Corporis culpa cumque dolores, dolorum, ea impedit laborum nisi quisquam ratione recusandae veritatis.

/*  css  */
    .no-copy{
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }
<!--  html  -->
    <p onselectstart="return false">
  <!--  opera 12.5  -->
    <p unselectable="on">

支持： 参考处