以下是在最近做项目时遇到的一些疑惑，于是搜集资料总结如下
题外话：js中的数据类型有undefined、boolean、number、string、object等5种，前4种为原始类型，第5种为引用类型。
（排序从简单到复杂）
1、undefined、NaN、null的联系与区别
<1>类型分析：
(1)定义的值和定义未赋值的为undefined，
(2)NaN是一种特殊的number，
(3)null是一种特殊的object。
<2>比较运算：
(1)undefined与null是相等，但是不全等；
(2)NaN与任何值都不相等，与自己也不相等。
<3>主要分析undefined和null：
(1)null是关键字；undefined是Global对象的一个属性
(2)null是对象(空对象, 没有任何属性和方法)；undefined是undefined类型的值
(3)对象模型中，所有的对象都是Object或其子类的实例，但null对象不是
(4)null“等值(==)”于undefined，但不“全等值(===)”于undefined
(5)运算时null与undefined都可以被类型转换为false，但不等值于false
题外话：每一个元素都有一个盒模型，而世界上存在两种计算元素宽度的方式：
一种是W3C的标准（宽度及为元素的宽度，不包括padding和border），
另一种是传统的盒模型（宽度包括了了元素自身的宽度再加上padding和border）。
2、input框设置width:100%,溢出父类容器
box-sizing: border-box;表示元素的大小是包括border以内的所有宽度，即传统盒模型，
而box-sizing: content-box;表示元素的宽度即content的宽度，不包括padding、border。
/*设置所有元素为传统盒模型*/
*,
*:before,
*:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
3、移动端最佳使用单位
rem是非常好用的一个属性，可以根据html来设定基准值，而且兼容性也很不错。
4、模拟:hover伪类
移动端有touch事件，onTouchStart 类似 onMouseOver，onTouchEnd 类似 onMouseOut。
使用Javascript：
var myLinks = document.getElementsByTagName(‘a‘);
for(var i = 0, len = myLinks.length ; i < len; i++){
myLinks[i].addEventListener(’touchstart’, function(){ this.className = “hover”; }, false);
myLinks[i].addEventListener(’touchend’, function(){ this.className = “”; }, false);
}
用css增加hover效果：
a:hover {/* 你要的效果*/}
5、input类型为date情况下不支持placeholder
桌面端（Mac）
– Safari 不支持 datepicker，placeholder 正常显示。
– Firefox 不支持 datepicker，placeholder 正常显示。
– Chrome 支持 datepicker，显示 年、月、日 格式，忽略placeholder。
移动端
– iPhone5 iOS7 有 datepicker 功能，但是不显示 placeholder。
– Andorid 4.0.4 无 datepicker 功能，不显示 placeholder
解决方法：
<input placeholder="Date" class="textbox-n" type="text" onfocus="(this.type=‘date‘)" id="date">
因为text是支持placeholder的。因此当用户focus的时候自动把type类型改变为date，这样既有placeholder也有datepicker了。
6、中文输入法输入英文，字母之间可能会出现一个六分之一空格
加上这句代码 this.value = this.value.replace(/\u2006/g, ‘‘);
>> 持续积累中…