1:CSS3阴影 box-shadow的使用和技巧总结
参考http://blog.csdn.net/freshlover/article/details/7610269
2：实现多行文本超出显示…(火狐浏览器不支持)
display:-webkit-box;
-webkit-line-camp:3;
-webkit-box-orient:vertical;
3：取消默认的高亮显示
-webkit-tap-highlight-color:rgba(0,0,0,0);
4:消除手机端默认样式
-webkit-apperance:none;
5：css的百分比padding-top和margin-top是相对于父元素的宽度定义。

6:css不显示滚动条
::-webkit-scrollbar{
width:0;
}

7：before和after元素不设置content时会不显示。

8：user-select:none|text|all|element
设置或检索是否允许用户选中文本
none：
文本不能被选择
text：
可以选择文本
all：
当所有内容作为一个整体时可以被选择。如果双击或者在上下文上点击子元素，那么被选择的部分将是以该子元素向上回溯的最高祖先元素。
element：
可以选择文本，但选择范围受元素边界的约束
IE6-9不支持该属性，但支持使用标签属性 onselectstart=”return false;” 来达到 user-select:none 的效果；Safari和Chrome也支持该标签属性；
直到Opera12.5仍然不支持该属性，但和IE6-9一样，也支持使用私有的标签属性 unselectable=”on” 来达到 user-select:none 的效果；unselectable 的 另一个值是 off；除Chrome和Safari外，在其它浏览器中，如果将文本设置为 -ms-user-select:none;，则用户将无法在该文本块中开始选择文本。不过， 如果用户在页面的其他区域开始选择文本，则用户仍然可以继续选择将文本设置为 -ms-user-select:none; 的区域文本；
对应的脚本特性为userSelect。

9：实现图片自适应的方式
- 使用picture元素（H5新增）
- 使用img的srcset，sizes属性
在HTML5中新增了一个元素picture，用过<video>,<audio>的会觉得<picture>的用法很熟悉。

<picture>
      <source  srcset="a.png" media="(max-width:750px)"/>
      <source srcset="b.png"/>
      <img srcset="b.png"/>
 </picture>

这个元素是有兼容性的，需要添加额外的插件

<script src="picturefill.js"></script>

<img src="a.png" srcset="a.png,b.png" sizes="(max-width:500px) 128px,256px"/>

上面这段代码的意思表示：不支持srcset属性时，使用src中的图片，否则浏览器会自动匹配最佳显示图片；sizes属性的值表示当可视区宽度不大于500像素，则图片宽度显示为128px，其他情况下，图片宽度显示为512px。
属性的作用类似媒体查询,但是它只是支持部分媒体查询，比如：

(min-width: 400px)

(not (orientation: landscape) )

( (orientation: landscape) and (min-width:400px) )

( (orientation: portrait) or (max-width: 500px) )

但它不支持我们明确的定义媒体类型：比如screen或者print等等。

除了使用px外，我们还可以使用em、px、cm、vw…，甚至CSS3的calc，不能使用百分比。

sizes=”(max-width: 320px) calc(100vw – 20px), 128px”

表示当视区宽度不大于320像素时候，图片宽度为整个视区宽度减去20像素的大小。

兼容性查看：兼容性

3.3 常见的使用场景

（1）如果图片的宽度是整个视口的百分比，那么sizes可以这样设置：

sizes=”80vw”

（2）假如图片两侧的边距各为10px，我们可以这样设置：

sizes=”calc( 100vw - 20px)”

（3）如果有一个两侧边距为10px的图片，允许它的最大宽度为500px，我们可以这样设置：

sizes=”( min-width:520px) 500px, calc(100vw - 20px)”

上面的代码表示当可视区大于520px时，图片宽度为500px，否则宽度为calc(100vw – 20px)计算的值。