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

更新日期: 2019-08-31阅读: 1.8k标签: 技巧

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;调整

有解决方案是将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(https://stackoverflow.com/questions/23548612/cant-click-on-buttons-after-css-transform)。里面也是说了这个解决方法。


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);
    }
}

链接: https://fly63.com/article/detial/6213

微信小程序技巧_你需要知道的小程序开发技巧

一直以来进行了比较多的微信小程序开发... 总会接触到一些和官方组件或 api 相关或其无法解决的需求,于是决定在这里小小的整理一下微信小程序开发的一些技巧

微信小程序分享到朋友圈方法与技巧

小程序提供onShareAppMessage 函数,此函数只支持分享给我微信朋友,小程序如何分享到朋友圈呢?使用canvas绘制一张图片,并用wx.previewImage预览图片,然后长按图片保存图片到手机。

前端新手程序员不知道的 20个小技巧

前端新手程序员不知道的 20个小技巧:作为前端开发者,使用双显示器能大幅提高开发效率、学编程最好的语言不是PHP,是English、东西交付之前偷偷测试一遍、问别人之前最好先自己百度,google一下、把觉得不靠谱的需求放到最后做,很可能到时候需求就变了...

小技巧:检查你本地及公共 IP 地址

本地的 IP 地址是分配给你计算机上的内部硬件或虚拟网卡的本地/私有 IP 地址。根据你的 LAN 配置,上述 IP 地址可能是静态或动态的。公共的 IP 地址是你的 Internet 服务提供商(ISP)为你分配的公共/外部 IP 地址。

12 个 CSS 高级技巧汇总

使用 :not() 在菜单上应用/取消应用边框;给body添加行高;所有一切都垂直居中;逗号分隔的列表;使用负的 nth-child 选择项目;对图标使用SVG;优化显示文本;对纯CSS滑块使用 max-height;继承 box-sizing

26 个 jQuery使用技巧

禁用右键点击;禁用搜索文本框;新窗口打开链接;检测浏览器;预加载图片;样式筛选;列高度相同;字体大小调整;返回页面顶部;获取鼠标的xy坐标;验证元素是否为空;替换元素

提高网站加载速度的一些小技巧

为你网站的用户留下良好的第一印象是非常必要的。随着商业领域的竞争,拥有一个吸引人的网站可以帮助你脱颖而出。研究表明,如果加载时间超过3秒,会有 40% 的用户放弃访问你的网站

《CSS世界》中提到的实用技巧

清除浮动主要用于子元素浮动(float)之后,父元素无法撑起高度和宽度。文字少时居中,多时靠左因为div嵌套着p,所以p的尺寸并不会超过div。但是要注意,当p的内容为英文单词组成的时候

不常被提及的JavaScript小技巧

这次我们主要来分享11个在日常教程中不常被提及的JavaScript小技巧,他们往往在我们的日常工作中经常出现,但是我们又很容易忽略。Set类型是在ES6中新增的,它类似于数组,但是成员的值都是唯一的

CSS-in-JS 库 styled-class

为什么要在JavaScript里写CSS?避免命名全局污染,条件和动态样式(比如选择主题色之类的),在框架层面进行限制或补充(比如补全供应商前缀),避免业务人员使用奇技淫巧

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!