CSS小知识

1. 移动端页面滚动过渡

   .scrolldiv { -webkit-overflow-scrolling: touch; }

2. 伪类 :active 可以实现元素触发样式，例如可以定义按钮按下时候的样式，配合css transition，平滑过渡效果。
3. display: table 活用，可以实现很多布局，例如移动端信息列表展示，
4. 垂直对齐 vertical-align:2px; (可以是负数)关键时刻，文字和图片或者其他标签想要垂直居中对齐的时候可以用到，注： display:inline-block 的元素也可使用 vertical-align。
   区分 vertical-align:2px; 和 margin-top:2px 的区别；vertical-align:2px; 只根据上级元素的vertical-align 属性决定，上级top 则从顶部开始加2px，而且不影响文字的位置，但是margin会影响到整行内容的位置（除非float）
5. 移动端 display:block 切换会影响到css3动画，
6. 禁用选择

		-moz-user-select: none; /*火狐*/
		-webkit-user-select: none; /*webkit浏览器*/
		-ms-user-select: none; /*IE10*/
		user-select: none;
	}

1. 移动端1px border 显示有问题，会通过各种方法实现0.5px的border，正在使用的一种方法是使用 border-image ，图片是一张宽高 6px 边框 2px 颜色 rgba(0,0,0,.2) 中空的png，这样可以根据不同的背景色都是一个相对暗一点的边线。

   .border{ -webkit-border-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGAQMAAADaAn0LAAAABlBMVEUAAAAAAAClZ7nPAAAAAnRSTlMfALvJw6YAAAAOSURBVAjXY2BgqIBCBgALTAHh3wAXEAAAAABJRU5ErkJggg==) 2 stretch; border-width: 1px; }

2. 绝对定位实现局部滚动，整个页面不动，创建类似网页的App，
3. meta，360浏览器默认 使用webkit 急速模式渲染，最后一种方式是判断浏览器内核

	< meta name="force-rendering" contect="WebKit">
	< meta http-equiv="X-UA-Compatible" content="chrome=1" >

1. 关于所谓的响应式布局，本人移动端已经不仅仅是 @media screen 去判断屏幕，移动端也有不同的屏幕宽度，不同类型的手机也不同宽度，ipone6和ipone5就有很大的不同，推荐几个文字自适应的单位：
   em 会根据基本字体大小按倍数去展示， vw vh 按照屏幕宽度百分比实现兑换px，例如：1vw = 1% w是屏幕宽度，h是屏幕高度，可以定义字体大小和元素的宽高等参数，
   也可以用图片实现自适应的布局，可以用一张大图宽度100% 撑起div 之后里面的元素都绝对布局出来，这样在不影响设计图情况下，实现自适应的布局。

补充： display:table 的元素使用 vw/vh 定义高度的时候不生效，但可已定义到内部的 display:table-cell 上，

1. 移动端的meta

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

viewport即可视区域，
width: viewport 的宽度 （范围从 200 到 10,000 ，默认为 980 像素 ）
height: viewport 的高度 （范围从 223 到 10,000 ）
initial-scale: 初始的缩放比例 （范围从>0到 10 ）
minimum-scale: 允许用户缩放到的最小比例
maximum-scale: 允许用户缩放到的最大比例
user-scalable: 用户是否可以手动缩放

<meta name="apple-mobile-web-app-capable" content="yes">

是否删除默认的苹果工具栏和菜单栏

<meta name="apple-mobile-web-app-status-bar-style" content="black">

控制 iphone 状态栏显示样式 black-translucent 半透明

<meta name="format-detection" content="telephone=no">

禁止iphone把数字转化为拨号链接！，类似的还有 meta name="format-detection" content="email=no" 和 meta name="format-detection" content="adress=no" 禁止跳到地图

<meta http-equiv="x-dns-prefetch-control" content="on">

DNS预解析

1. 去除input 在iphone时候的默认内阴影

   input{ 
     appearance: none; -webkit-appearance: none; /*去除默认阴影*/
   }
   

2. text-rendering: optimizeLegibility; css文本渲染优化显示文本, 值为：auto

   optimizeSpeed

   optimizeLegibility

   geometricPrecision 区别在渲染速度，清晰度，连字方面

3. 为IE兼容伪类 调取的js