在过去的一年里，前端技术迅猛发展，前端各类技术都在优化升级，在前端知识体系图日益庞大的今天，我们了解一些冷知识有时候也能解决一些棘手的问题。
css篇：
简单的文字模糊效果
p { color: transparent; text-shadow: #111 0 0 5px;}
两行简单的CSS3代码可达到将文字模糊化处理的目的，出来的效果有点像使用PS的滤镜，so cool!
垂直居中
垂直居中显示某个DIV，我们知道CSS中天然有水平居中的样式text-align:center。唯独这个垂直居中无解。当然你可以将容器设置为display:table，然后将子元素也就是要垂直居中显示的元素设置为display:table-cell，然后加上vertical-align:middle来实现，但此种实现往往会因为display：table而破坏整体布局，那还不如直接用table标签了呢。
下面这个样式利用了translate来巧妙实现了垂直居中样式，需IE9+。
.box{ position: relative; top: 50%; transform: translateY(-50%);}
相比而言，水平居中要简单得多，像上面提到的text-align:center，经常用到的技巧还有margin:0 auto。但对于margin大法也只在子元素宽度小于容器宽度时管用，当子元素宽度大于容器宽度时此法失效。
如法炮制，利用left和transform同样可实现水平居中，不过意义不大，毕竟text-align和margin差不多满足需求了。
.box { position: relative; left: 50%; transform: translateX(-50%); }
多重边框
利用重复指定box-shadow来达到多个边框的效果
.div{
box-shadow: 0 0 0 6px rgba(0, 0, 0, 0.2),
0 0 0 12px rgba(0, 0, 0, 0.2),
0 0 0 18px rgba(0, 0, 0, 0.2),
0 0 0 24px rgba(0, 0, 0, 0.2);
height: 200px;
margin: 50px auto;
width: 400px
}
实时编辑CSS
通过设置style标签的display:block样式可以让页面的style标签显示出来，并且加上contentEditable属性后可以让样式成为可编辑状态，更改后的样式效果也是实时更新呈现的。此技巧在IE下无效。拥有此技能者，逆天也！
创建长宽比固定的元素
通过设置父级窗口的padding-bottom可以达到让容器保持一定的长度比的目的，这在响应式页面设计中比较有用，能够保持元素不变形。
this content will have a constant aspect ratio that varies based on the width.
CSS中也可以做简单运算
通过CSS中的calc方法可以进行一些简单的运算，从而达到动态指定元素样式的目的。
.div{ background-position: calc(100% - 50px) calc(100% - 20px);}
JavaScript篇:
生成随机字符串
利用Math.random和toString生成随机字符串，来自前一阵子看到的一篇博文。这里的技巧是利用了toString方法可以接收一个基数作为参数的原理，这个基数从2到36封顶。如果不指定，默认基数是10进制。
function generateRandomAlphaNum(len) {
var rdmString = "";
for (; rdmString.length < len; rdmString += Math.random().toString(36).substr(2));
return rdmString.substr(0, len);
}
整数的操作
JavaScript中是没有整型概念的，但利用好位操作符可以轻松处理，同时获得效率上的提升。|0和~~是很好的一个例子，使用这两者可以将浮点转成整型且效率方面要比同类的parseInt,Math.round 要快。在处理像素及动画位移等效果的时候会很有用。性能比较见此。顺便说句，!!将一个值方便快速转化为布尔值 !!window===true 。
var foo = (12.4 / 4.13) | 0;//结果为3var bar = ~~(12.4 / 4.13);//结果为3
重写原生浏览器方法以实现新功能
下载的代码通过重写浏览器的alert让它可以记录弹窗的次数。
(function() {
var oldAlert = window.alert, count = 0;
window.alert = function(a) {
count++;
oldAlert(a + "\n You've called alert " + count + " times now. Stop, it's evil!");
};
}
)();
alert("Hello World");
不声明第三个变量的值交换
我们都知道交换两个变量值的常规做法，那就是声明一个中间变量来暂存。但鲜有人去挑战不声明中间变量的情况，下面的代码给出了这种实现。蛮有创意的。
var a=1,b=2;a=[b,b=a][0];
禁止别人以iframe加载你的页面
if (window.location != window.parent.location) window.parent.location = window.location;
console.table
Chrome专属，IE绕道的console方法。可以将JavaScript关联数组以表格形式输出到浏览器console，效果很惊赞，界面很美观。
微信
