HTML、CSS、JavaScript拾遗

1、html元素中，如果有文本存在，当元素大小不足以容纳文本时，文本会进行强制换行。比如说设置页面不出现滚动条，body的overflow为hidden时，或者scroll为no时，span在超过页面时其内部文本会换行。设置span的white-space为nowrap即可强制令文本不换行。

white-space的作用是控制文本中间的换行符与空格符的

nowrap忽略换行符，即使超过父元素宽度也不换行，直到遇到br为止，会令滚动条出现（不自动换行，忽略换行符，合并空格）。

pre空白会被浏览器保留，换行符也会令文本换行，但同时，如果没有换行符的话，元素不会进行换行，结果就是出现滚动条（不自动换行，保留换行符，保留空格）。

normal默认，合并空白，忽略换行符，直到宽度不够显示文本时才进行换行，以不出现滚动条为优先条件（自动换行，忽略换行符，合并空格）。

pre-wrap保留空白符序列且正常换行，即保留换行符，同时若超过最大宽度，也会进行自动换行（自动换行，保留换行符，保留空格）。

pre-line合并空白符序列但保留换行，即保留换行符，会自动换行（自动换行，保留换行符，合并空格）。

2、css中使用伪类after::与before::可以创建元素，该元素并不属于document。

3、<script>标签中的async与defer。

　　一般的script标签（不带async等属性）加载时会阻塞浏览器，也就是说，浏览器在下载或执行该js代码块时，后面的标签不会被解析，例如在head中添加一个script，但这个script下载时网络不稳定，很长时间没有下载完成对应的js文件，那么浏览器此时一直等待这个js文件下载，此时页面不会被渲染，用户看到的就是白屏（网页文件已下载好，但浏览器不解析），而使用async属性，浏览器会下载js文件，同时继续对后面的内容进行渲染，通常如果js不需要改变DOM结构时可以使用async进行异步加载（比如一些统计代码可以异步加载，因为此代码与页面执行逻辑无关，不会改变DOM结构）。

　　defer则是在页面加载完毕之后开始执行，而不是异步执行。

4、函数声明（Function Declaration） 和 函数表达式（Function Expression ）的区别

　　函数声明：function foo() {}，函数表达式：var foo = function () {};

　　那这个写法，是不是同时存在函数声明也有函数表达式呢？var foo = function f() {};

　　这其实是一个「命名函数表达式」。

var foo = function f() {
    return typeof f;
};
foo(); // return 'function'

　　另外，只有当语句以function开头才会被解释器当作函数声明来处理。在把函数对象作为参数或者作为引用使用时，两者通用，当直接调用函数时，两者也通用。但是当作为对象构造函数内部的函数时，两者是有区别的，必须使用第二种表达式形式。还有当使用闭包时，返回的函数是无法调用到这两种函数的，变量会被保留，函数却不会。

(function(){
var a = function(){}
function b(){}
this.c = function(){ a(); b(); }
})();
c();

　　c();是执行不到a和b的。var 方式定义的函数，不能先调用函数，后声明，只能先声明函数，然后调用。function方式定义函数可以先调用，后声明。var func=function 和 function func()在意义上没有任何不同，但其解释优先级不同：后者会先于同一语句级的其他语句。

　　5、JavaScript返回值

　　在JS引擎中，所有的语法，操作都有返回值，而且通常返回值是它本身或undefined。通常我们可以用"()"操作符，来获取当前句子的返回值(部分操作符不能用，如var)。例如：a=3;其实这行的返回值就是3，所以在a=b=3时，JS引擎就可以正确的执行下去，首先3赋值给b,然后当前的返回值3再赋值给a（而不是大家所认为的，先将3赋值给b，然后再将b赋值给a）。又例如函数var fun=function(){}，当JS引擎执行到这行时，会先执行右边，返回值是一个函数的字面量，然后将这个函数字面量赋值给fun。

　　Jquery也是利用了这个特性（函数return this），所以才有链式调用。我们看个例子："fontFamily".replace( /([A-Z])/g, "-$1" ).toLowerCase()，没错这里也是利用了返回值，所以这行的结果是：font-family。

　　6、CSS3中有一些滤镜

.gallery:hover li:not(:hover){       
        -webkit-filter: blur(2px) grayscale(1);
        -moz-filter: blur(2px) grayscale(1);
        -o-filter: blur(2px) grayscale(1);
        -ms-filter: blur(2px) grayscale(1);
        filter: blur(2px) grayscale(1);
        opacity: .7; /* fallback */        
    }

　　filter定义滤镜，后面为滤镜效果

• grayscale 灰度               值为0-1之间的小数 
• sepia 褐色　　　　　　   值为0-1之间的小数
• saturate 饱和度　　　　 值为num
• hue-rotate 色相旋转　　值为angle
• invert 反色　　　　　　  值为0-1之间的小数
• opacity 透明度　　　　　值为0-1之间的小数
• brightness 亮度　　　　 值为0-1之间的小数
• contrast 对比度　　　　 值为num
• blur 模糊　　　　　　     值为length
• drop-shadow 阴影

　　7、css中一些特殊值

.front {
    background: url(images/cardjfront.png) no-repeat center/100% 100%;
    z-index: 2;
}
.back {
    background: url(images/cardjback.png) no-repeat center/100% 100%;
    transform: rotateY(180deg);
}

　　可以通过样式的background属性，调用url()函数，来设置背景图片。