1/27~1/29
点击input type=file的按钮
获取本地图片并且显示在页面上，但是并不传到后台；最理想是获取以后，发送给后台再回传并且显示；
下面是实现方法：
$(".file").change(function() {
var $file = $(this);
var fileObj = $file[0];
var windowURL = window.URL || window.webkitURL;
var dataURL;
var $img =$(this).parent().parent().siblings('img');
if(fileObj && fileObj.files && fileObj.files[0]){
dataURL = windowURL.createObjectURL(fileObj.files[0]);
$img.attr('src',dataURL);
}
else{
dataURL = $file.val();
var imgObj = document.getElementById("preview");
// 两个坑:
// 1、在设置filter属性时，元素必须已经存在在DOM树中，动态创建的Node，也需要在设置属性前加入到DOM中，先设置属性在加入，无效；
// 2、src属性需要像下面的方式添加，上面的两种方式添加，无效；
imgObj.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
imgObj.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = dataURL;
}
});
div使用fixed相对于页面居中
<html>
<style>
#divfixed{
position: fixed;
left:0;right:0;margin-left:auto;margin-right:auto;
background:#456789;width:400px;height:100px;text-align: center;
}
</style>
<boyd>
<div id="divfixed">
我是fixed定位的div
</div>
</boyd>
<style>
#divfixed{
position: fixed;
left:0;right:0;margin-left:auto;margin-right:auto;
background:#456789;width:400px;height:100px;text-align: center;
}
</style>
<boyd>
<div id="divfixed">
我是fixed定位的div
</div>
</boyd>
</html>
一句话：有些块元素不可以包含另一些块元素 ，DTD中规定了块级元素是不能放在P里;
P标签内包含块元素时，它会先结束自己，比如：<*p><*div>测试p包含div<*/div><*/p>
那么浏览器会解释成：
<*p><*/p><*div>测试p包含div<*/div><*p><*/p> 会多解释出一个p
起因：发现块级元素P内是不能嵌套DIV的
深究：我们先来认识in-line内联元素和block-line块元素，因为HTML里几乎所有的元素都属于内联元素和块元素中的一种。
in-line这个词有很多解释:内嵌，内联，行内，线级等，但是它们都表示相同的意思，在这里我们选择习惯的叫法--内联。
for 属性规定label与哪个表单元素绑定。
隐式和显式的联系
标记通常以下面两种方式中的一种来和表单控件相联系：将表单控件作为标记标签的内容，这样的就是隐式形式，或者为<label>标签下的for属性命名一个目标表单id，这样就是显示形式。
例：在XHTML中：
显示的联系：
<label for="SSN">Social Security Number:</label>
<input type="text" name="SocSecNum" id="SSn" />
隐式的联系：
<label>Date of Birth: <input type="text" name="DofB" /></label>
我们还可以给复选按钮加上动画：
input[type=checkbox] + label:before {
content: "\2713";
color: transparent;
transition: color ease .3s;
}
input[type=checkbox]:checked + label:before {
color: #000;
}
下面是单选按钮的动画：
<font size="3">input[type=radio] + label:before {
content: "\26AB";
border: 1px solid #000;
border-radius: 50%;
font-size: 0;
transition: font-size ease .3s;
}
input[type=radio]:checked + label:before {
font-size: 10px;
}</font>
position:sticky用法
position:sticky是一个新的css3属性，它的表现类似position:relative和position:fixed的合体，在目标区域在屏幕中可见时，它的行为就像position:relative;而当页面滚动超出目标区域使，它的表现就像position:fixed,它会固定在目标位置。
.sticky{
position:sticky;position:-webkit-sticky;top15px;
}
目前，只有Mozilla和Safari支持，但是你可以使用如下方式实现.sticky{position:static;position:sticky;top:0px;}
特别有利于移动网站，因为你需要创建一个可移动区块且不影响其他元素。
新尺寸(interesting)
用来描述不同物体的尺寸。比如
下面这些可以弄差不多单位符
vm：视口宽度，单位1/100
vh:视口高度，单位1/100
vmin和vmax:二者都是相对于视口的宽度或高度，但前者总是相对于大的那个，后者总是相对于小的那个。
不必定义父级元素尺寸的百分比或其它东东。
<font size="3">.smoe-text{font-size:100vh;line-height:100vh}</font>
在使用这个特性时，存在一些劣势：
IE9应该使用vm而不是vmin
ios7上的vh，存在一些bug
vmax还不被完全支持
文本修饰
用数行代码就能改变选中文本的颜色：
*::selection{color: #fff;background: #000;}
*::-moz-selection{/*Only Firefox still needs a prefix*/ color: #fff;background:#000;}
除了定义选中文本的颜色，还能定义阴影和背景。
触摸设备上的块滚动
如果页面存在一些内部滚动的区块，那么除了添加overflow:scroll/auto,还要添加这行代码：
-webkit-overflow-scrolling:touch;
问题在于，移动设备浏览器对于overflow:scroll属性支持不够好，会滚动整个页面而不是期望的区块。-webki-overflow-scrolling修复了这个问题。
使用硬件加速
有时候你的动画能够减慢用户电脑。为了阻止这种情况，你可以针对特定区块使用加速：
.block{transform:translatez(0);}
你可能感受不到变化，但是浏览器理解，这个元素应该被看做三维，然后开启加速。如果针对will-change属性的具体设计，没有提供正常支持，这种方法就不太建议了。
百分比表示的垂直边距
事实上，垂直缩进是根据父元素的宽度，而非高度计算出来的。我们创建这个区块：
<div class="parent"><div class="child"></div></div>
.parent{height:400px;width|:200px;}
.child{height:50%;padding-top:25%;padding-bottom:25%;width:100%;}
要记住，百分比是根据父元素的宽度计算出来的。
Firefox下的button边距
Firefox还没有自身方法来计算button的边距。貌似奇怪，但是你可以手动添加。
button{padding:0;}
button:-moz-focus-inner,
input[type="reset"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner{
border:none;
padding:0;
}
js不具备操作文件的能力
iOS6 和 andorid4.1 以上 input 里面加个 capture 属性就可以调用拍照。
input type="file"这个标签调用相机和相册
兼容安卓微信调用摄像头
<input type="file" name="file" capture="camera">
兼容安卓默认选择sd卡上的相册图片
<input type="file" name="file" accept="image/*" >
<input type="file" accept="video/*;capture=camcorder">
<input type="file" accept="audio/*;capture=microphone">
之前做过微信的一些项目，在ios上使用这个file域是可以实现【拍照】和【选择相册】的
但是由于安卓机的兼容性非常糟糕，有些安卓机是可以的，有些就是不行，需要用一些app控件才可以实现
<input id="fileElem1" pictype='30010003' data-role="none" type="file" name="idFile" accept="image/jpg,image/jpeg,image/png,image/gif" />
浙公网安备 33010602011771号