display: inline-block、 height: (任何值除了auto)、 float: (left 或 right)、position: absolute、 width: (任何值除了auto)、zoom: (除 normal 外任意值) zoom放大或缩小

    15、在IE6下，浮动元素和绝对定位元素是并列关系的时候，绝对定位元素会消失掉

解决办法:用div把绝对定位元素包起来

    16、在IE6，7下，子元素有相对定位的话，父级的overflow对它不起作用

解决办法:给父级也加相对定位

    17、在IE6下，父级的宽高是奇数的话，元素的right（bottom）有1px的偏差

    18、IE6,7,8不支持opacity、用filter:alpha(opacity=50);

    19、在IE6下，给输入类型的表单控件加border:none无效

解决办法:重置input背景

在IE6下，输入类型的表单控件上下各有1px的空隙

解决办法:给元素浮动

在IE6下，输入类型的表单控件输入文字的时候，背景会随着一块移动

解决办法:把背景加给父级

    20、在IE6下，子元素的margin -1px（超出父集边框，） 父集会自动包裹住子元素

解决办法：给父集加 position：relative

动画 animation

    @keyframs animate(名称随变起){

        0%{

            width=100px;

        }

        10%{

            width=500px;

        }

    }

样式内容：.box{animation:animate(名称)  3s（时间）  1s（延迟时间）  infinite（无限循环） altermate（反向运行）； }

transform：变换

    transform-origin：变还原点位置

（x轴方向 （left  center right  百分比%）

    y轴方向 （left  center right  百分比%）

    z轴方向 （left  center right  百分比%）

transform-style：preserve-3d  （做3d必须加）

    transform：scale（x，y）

    scale3d  （x，y，z） 缩放

    rotate  （deg角度）

    rotate  （x,y,z,deg角度）旋转

过渡属性：

    transition: property duration timing-function delay;

值 描述

    transition-property  CSS 属性的名称

    width、height

    transition-duration 过度时间（秒、毫秒）

    transition-delay 延迟时间（秒、毫秒）

    transition-timing-function 规定运动形式

    ease    逐渐变慢（默认值）

    linear   匀速

    ease-in  加速

    ease-in-out 先加速后减慢

    cubic-bezier（x1，y1，x1，y1） 贝塞尔曲线

滤镜：

    -webkit-filter:blur(5px);  //模糊，此处为5像素

    -webkit-filter:sepia(0.5);  //叠加褐色，取值范围0-1，此处表示50%的褐色

    -webkit-filter:brightness(0.5);  //亮度，取值范围0-1，5倍亮度（数字为0时为正常样式，为1时表示的是100%亮度，无 法看 到图片）

    -webkit-filter:hue-rotate(30deg); //色相（按照色相环进行旋转，顺时针方向，红-橙-黄-黄绿-绿-蓝绿-蓝-蓝紫-紫-紫红- 红） 此处为叠加黄色滤镜

    -webkit-filter:invert(1);  //反色，取值范围0-1,0为原图，1为彻底反色之后，0.5为灰色

    -webkit-filter:saturate(4);  //饱和度，取值范围0~*,0为无饱和度，1为原图，值越高饱和度越大

    -webkit-filter:contrast(2);  //对比度，取值范围0~*,0为无对比度（灰色），1为原图，值越高对比度越大

    -webkit-filter:opacity(0.8);  //透明度，取值范围0~1,0为全透明，1为原图

    -webkit-filter:drop-shadow(17px 17px 20px black); //阴影

移动端写默认

宽度适应屏幕大小

    <meta name="viewport" content="width=device-width,user-scalable=no" />

加入JS 使最宽不超过540px  设置rem 为16分之一

    <script>

        var oHtml=document.getElementsByTagName("html")[0];

        var iWidth=document.documentElement.clientWidth;

        iWidth=iWidth>540?540:iWidth;

        oHtml.style.fontSize=iWidth/16+"px";

    </script>

清除样式:

    a{-webkit-tap-highlight-color:rgba(255,0,0,0);} 点击有暗影

    input{-webkit-appearance:none;}

    body *{-webkit-text-size-adjust:none;} 字体最小大小

解决滑动内容效果:

    <script>