css常用属性

解决谷歌浏览器中的input背景色默认是黄色

[原文链接](http://www.cnblogs.com/zhaokai021/p/4625169.html ) 
input:-webkit-autofill {
-webkit-box-shadow: 0 0 0px 1000px white inset;
border: 1px solid #CCC!important;
}

overflow-x: auto在iOS有兼容问题

-webkit-overflow-scrolling: touch;

---

往返缓存问题

点击浏览器的回退，有时候不会自动执行js，特别是在mobilesafari中。这与往返缓存(bfcache)有关系。 解决方法 ：

window.onunload = function () {};

---

input的placeholder会出现文本位置偏上的情况

—input 的placeholder会出现文本位置偏上的情况：PC端设置line-height等于height能够对齐，而移动端仍然是偏上，解决方案时是设置css

line-height：normal;

---

iOS系统中文输入法输入英文时，字母之间可能会出现一个六分之一的空格

this.value = this.value.replace(/\u2006/g, '');

---

消除transition闪屏问题

—1.尽可能地使用合成属性transform和opacity来设计CSS3动画，不使用position的left和top来定位
2.开启硬件加速

-webkit-transform: translate3d(0, 0, 0);
   -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);

---

一些情况下对非可点击元素如(label,span)监听click事件，ios下不会触发

—针对此种情况只需要对不触发click事件的那些元素添加一行css代码即可

cursor: pointer;

---

fixed定位缺陷

—iOS下fixed元素容易定位出错，软键盘弹出时，影响fixed元素定位，android下fixed表现要比iOS更好，软键盘弹出时，不会影响fixed元素定位 。iOS4下不支持position:fixed

解决方案： 可用iScroll插件解决这个问题

---

calc的兼容处理

— CSS3中的calc变量在iOS6浏览器中必须加-webkit-前缀，目前的FF浏览器已经无需-moz-前缀。 Android浏览器目前仍然不支持calc，所以要在之前增加一个保守尺寸：

    div { 
      width: 95%; 
      width: -webkit-calc(100% - 50px); 
      width: calc(100% - 50px); 
    }

---

禁止ios和android用户选中文字

-webkit-user-select: none;

---

禁止 iOS 弹出各种操作窗口

-webkit-touch-callout: none;

---

禁止 iOS 识别长串数字为电话

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

---

iOS下取消input在输入的时候英文首字母的默认大写

<input type="text" autocapitalize="none">

---

pointer-events: none;

加上后，所关联的元素的事件监听都会失效，等于让元素变得“看得见，点不着”。IE到11才开始支持，其他浏览器的当前版本基本都支持。

详细介绍

---

修改移动端难看的点击的高亮效果，iOS和安卓下都有效

* {
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}

---

阻止旋转屏幕时自动调整字体大小

* {
  -webkit-text-size-adjust: none;
}

---

appearance 用来改变任何元素的浏览器默认风格

将“段落p”渲染成button的风格，也可以渲染成“输入框”、“选择框”等效果。            
我们可以使用“appearance”属性对任何元素的渲染风格改变，最简单的来说，我要把“a”链接默认显示成“按钮”风格，那么我们可以使用“appearance”设置为“button”。

---

eg:
/*看起来像个按钮，以按钮的风格渲染*/
.lookLikeAButton{
 -webkit-appearance:button;
 -moz-appearance:button;
}
/*看起来像个清单盒子，以listbox风格渲染*/
.lookLikeAListbox{
 -webkit-appearance:listbox;
 -moz-appearance:listbox;
}
/*看起来像个清单列表，以listitem风格渲染*/
.lookLikeAListitem{
 -webkit-appearance:listitem;
 -moz-appearance:listitem;
}

appearance参考文档

---

背景渲染范围

background-clip:
border-box   背景被裁剪到边框盒。（背景色能渲染到边框）
padding-box  背景被裁剪到内边距框。（边框不渲染背景色）
content-box  背景被裁剪到内容框。（背景只渲染在content区域）

---

调整焦距(放大缩小)

eg:transform: scale(.8);

zoom和scale的差异
控制缩放的值不一样。zoom更全面，但是不能是负数，只能等比例控制；而scale虽然只能是数值，但是能负数，可以只控制1个维度。
zoom加在任意一个元素上都会引起一整个页面的重新渲染
scale只是在当前的元素上重绘
Chrome等浏览器下，zoom/scale不要同时使用，因为，缩放效果会累加。

 .drop::before {
        content: '';
        display: block;
        background: rgba(255, 255, 255, .2);
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        border-radius: 100%;
        animation: circleMiniGreenBefore 1.5s cubic-bezier(.455, .03, .515, .955) 1.65s infinite alternate;
    }

    @-webkit-keyframes circleMiniGreenBefore {
        0% {
            opacity: 1;
            -webkit-transform: scale(1);
            transform: scale(1)
        }
        50% {
            -webkit-transform: scale(.8);
            transform: scale(.8);
            opacity: .8
        }
        75% {
            -webkit-transform: scale(1.7);
            transform: scale(1.7)
        }
        100% {
            opacity: 0
        }
    }

    @keyframes circleMiniGreenBefore {
        0% {
            opacity: 1;
            -webkit-transform: scale(1);
            transform: scale(1)
        }
        50% {
            -webkit-transform: scale(.8);
            transform: scale(.8);
            opacity: .8
        }
        75% {
            -webkit-transform: scale(1.7);
            transform: scale(1.7)
        }
        100% {
            opacity: 0
        }
    }

---

旋转

-webkit-transform: skew(15deg) rotate(6deg);
-moz-transform: skew(15deg) rotate(6deg);
transform: skew(-346deg) rotate(-175deg);
         y轴旋转  3d效果   中心点旋转  2d效果