能让你受益不浅的10个css使用技巧

1. Safari 3D变换会忽略z-index的层级

在Safari浏览器下(此Safari浏览器包括iOS的Safari，iPhone上的微信浏览器，以及Mac OS X系统的Safari浏览器)，当咱们使用3D transform变换的时候，若是祖先元素没有overflow:hidden/scroll/auto等限制，则会直接忽略自身和其余元素的z-index层叠顺序设置，而直接使用真实世界的3D视角进行渲染。 例以下面的场景，图中红框里面的模块，使用 3D transform变换，进行旋转动画，可是在Safari浏览器下，忽略了二维码遮罩层的z-index,结果使用了真实世界的3D视角进行渲染。出现了重叠的bug：

解决方法：

1. 父级，任意父级，非body级别，设置overflow:hidden可恢复和其余浏览器同样的渲染。
2. 以毒攻毒。有时候，页面复杂，咱们不能给父级设置overflow:hidden，那么能够将被影响的元素设置一个足够大的translateZ值就能够，如translateZ(100px)。

2. 文字居中兼容

正常处理文字上下居中的手段是让元素height和line-height相等，可是安卓环境下当字体大小<14px/0.7rem的时候会出现居中失效的状况。

解决方法：

1. 判断系统环境（安卓/IOS）分别做微调；

2. font-size、height、width所有放大为2倍，利用transform进行缩放

height: 1rem; 
width: 2rem; 
font-size: 0.5rem;

变成： 
height: 2rem; 
width: 4rem; 
font-size: 1rem; 
transform: scale(0.5);
复制代码

但因为放大以后占据空间，左右会留白，须要利用margin负值 margin: -0.35rem -0.45rem 0;调整

3. 有解决方案是将rem改成px。

3. 2个a标签包裹的模块作90度旋转，其中一个模块会出现点击失灵

定义了一个动画效果以下(sass代码)：

@keyframes official-featured_rotate {
	10%,50%{  
      transform:rotateY(90deg);  
    } 
    60%,100%{  
      transform:rotateY(0deg);  
    }  
}
&-rotate {
    position: absolute;
    width: rem(350/2);
    height: rem(160/2);
    transform-style:preserve-3d;
    transform:translate3d(0,0,0);
    &.ani_rotate {
        animation:official-featured_rotate 5s linear 0s infinite;
        animation-delay: 2s;
    }
    &__item {
        width: rem(350/2);
        height: rem(160/2);
        position: absolute;
        &:nth-child(1) {
            transform: translateZ(rem(350/4)); 
        }
        &:nth-child(2) {
            transform: rotateY(90deg) translate3d(0,0,rem(350/4)); 
        }
    }
}
复制代码

这里是2个a标签，作90度的旋转效果使得两个a能够循环切换展现。这里2个的基本样式是一致的，宽高也同样。可是在安卓下（ios正常）只有打开页面能看到的第一个a标签能正常跳转，能正常绑定事件。第二个a不能跳转，我就想那我经过点击事件来跳转能够不，结果绑定任何事件都不生效。

解决方法：

而后测试发现，在旋转过程当中（只要未彻底旋转90度）点击仍是能一切正常的。因而把旋转角度改成了89.99度，一切正常。动画效果修改成：

@keyframes official-featured_rotate {
	10%,50%{  
      transform:rotateY(-89.99deg);  
    } 
    60%,100%{  
      transform:rotateY(0deg);  
    }  
}
复制代码

后来查找了一下stackoverflow(stackoverflow.com/questions/2…)。里面也是说了这个解决方法。

4. 使用currentColor来简化css

设置border-color、background-color等颜色的时候，可使用currentColor[与当前元素的字体颜色相同]来简化css。

.div{
    color: rgba(0,0,0,.85);
    font-weight: 500;
    text-align: left;
    padding: 20px;
    border: solid 1px currentColor;
}
复制代码

5. 利用灰色滤镜作样式的disable效果

灰色图能够直接加滤镜，不用切多一张图。如图：

解决方法：

.coupon_style .disable {
  -webkit-filter: grayscale(1);
}
复制代码

6. 曲线阴影的实现

• 多个阴影重叠，就是正常阴影+曲线阴影
• 正常状况下，有个矩形有正常的阴影，做为主投影，这时候再定义一个有必定弧度圆角的圆角矩形，而后放在正常矩形的下面，并露出一点点底部有弧度的阴影，这样的话就能够造成曲线投影的效果。

效果：

代码：

7. 翘边阴影的实现

利用:before和:after，加上绝对定位的性质，能够造成一个矩形，这个时候结合CSS3的倾斜属性skew和旋转属性rote。就能够造成一个有旋转角度的平行四边形，这个时候再和原来的矩形重叠，则可产生翘边效果。

效果：

代码：

8.利用-webkit-mask实现蒙版效果

效果图：

代码：

background: url("images/logo.png") no-repeat;
-webkit-mask : url("images/mask.png");
复制代码

mask.png中黑色表明是不透明的（alpha：1）,其余部分为透明的（alpha：0），将它盖在背景图上，注意：背景图对应mask.png中透明的位置也会变成透明，留下非透明的形状，即背景图的可见形状与mask.png的可见形状相同。 即为"蒙版"。

9.图片自适应占位方式

当图片未正确加载，或加载完成前，因为图片高度为0，其容器会由于没有内容，致使容器没法撑高而塌陷，而若是加载较慢则会再图片加载完成后出现闪烁的状况。

css中，当padding-top/bottom值为百分比时，其值都是以其父元素的宽度为参照对象。所以对于宽高比例固定的状况，能够利用padding-top/bottom用于图片自适应占位，解决页面闪烁的问题。

若是仅设置值padding-top/bottom为百分比，会出现一个问题，就是该方法容器的max-height属性会失效，就没法限制容器的最大高度了。

所以，能够给容器添加一个伪元素的子元素用于撑起内容，该子元素拥有一个padding-top:100%，同时给容器一个max-height尝试限制容器的高度，最后内容用绝对定位的方式添加便可。如：

#container{
    width: 50%;
    max-height:300px;
    background-color:#ddd;
    /*因为margin存在塌陷的问题，须要经过构建BFC来保证容器不会受到影响，所以这里能够给容器一个overflow:hidden来保证伪元素的margin不会塌陷。*/
    overflow:hidden;
    position: relative; /* 父容器相对定位 */
}
.placeholder::after{
    content:"";
    display:block;
    margin-top:100%;
}
img{
    position:absolute;  /* 内容绝对定位 */
    left: 50%;
    top: 50%;      
    transform: translateX(-50%) translateY(-50%); /* 控制内容绝对定位位置 */
    width:80%;   /* 控制图片不溢出，所以这里使用的图片实际宽度受父容器影响 */
}
复制代码

可是对于宽高比例不定的图片来讲，这样作可能致使图片显示不全，使用时要注意。

10.页面自适应最佳实践

通过大型项目实践，下面这段CSS是最好的基于rem和vm和calc实践代码：

html {
    font-size: 16px;
}
@media screen and (min-width: 375px) {
    html {
        /* iPhone6的375px尺寸做为16px基准，414px正好18px大小, 600 20px */
        font-size: calc(100% + 2 * (100vw - 375px) / 39);
        font-size: calc(16px + 2 * (100vw - 375px) / 39);
    }
}
@media screen and (min-width: 414px) {
    html {
        /* 414px-1000px每100像素宽字体增长1px(18px-22px) */
        font-size: calc(112.5% + 4 * (100vw - 414px) / 586);
        font-size: calc(18px + 4 * (100vw - 414px) / 586);
    }
}
@media screen and (min-width: 600px) {
    html {
        /* 600px-1000px每100像素宽字体增长1px(20px-24px) */
        font-size: calc(125% + 4 * (100vw - 600px) / 400);
        font-size: calc(20px + 4 * (100vw - 600px) / 400);
    }
}
@media screen and (min-width: 1000px) {
    html {
        /* 1000px日后是每100像素0.5px增长 */
        font-size: calc(137.5% + 6 * (100vw - 1000px) / 1000);
        font-size: calc(22px + 6 * (100vw - 1000px) / 1000);
    }
}
复制代码

最后

• 欢迎加我微信(winty230)，拉你进技术群，长期交流学习...
• 欢迎关注「前端Q」,认真学前端，作个有专业的技术人...