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:
解决方法:
- 父级,任意父级,非body级别,设置overflow:hidden可恢复和其他浏览器一样的渲染。
- 以毒攻毒。有时候,页面复杂,我们不能给父级设置overflow:hidden,那么可以将被影响的元素设置一个足够大的translateZ值就可以,如translateZ(100px)。
2. 文字居中兼容
正常处理文字上下居中的手段是让元素height和line-height相等,但是安卓环境下当字体大小<14px/0.7rem的时候会出现居中失效的情况。
解决方法:
判断系统环境(安卓/IOS)分别作微调;
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);
}
}
最后
- 欢迎加我微信(winty230),拉你进技术群,长期交流学习...
- 欢迎关注「前端Q」,认真学前端,做个有专业的技术人...
10个让你受益匪浅的css使用技巧的更多相关文章
- 【转】10条你不可不知的css规则
10条你不可不知的css规则 Posted on 2006-12-20 10:33 雨中太阳 阅读(343) 评论(1) 编辑 收藏 :[译]10条你不可不知的css规则正文: Published D ...
- 10个CSS简写技巧让你永远受用
转自:http://blog.bingo929.com/10-css-shorthand-tips.html 前言: CSS简写就是指将多行的CSS属性声明化成一行,又称为CSS代码优化.CSS简写的 ...
- CSS hack技巧
CSS hack技巧一览,原文来自CSDN freshlover的博客专栏<史上最全CSS Hack方式一览> 什么是CSS hack 由于不同厂商的流览器或某浏览器的不同版本(如IE6- ...
- 你所不知道的 CSS 滤镜技巧与细节
承接上一篇你所不知道的 CSS 动画技巧与细节,本文主要介绍 CSS 滤镜的不常用用法,希望能给读者带来一些干货! OK,下面直接进入正文.本文所描述的滤镜,指的是 CSS3 出来后的滤镜,不是 IE ...
- 你所不知道的 CSS 阴影技巧与细节
关于 CSS 阴影,之前已经有写过一篇,box-shadow 与 filter:drop-shadow 详解及奇技淫巧,介绍了一些关于 box-shadow 的用法. 最近一个新的项目,CSS-Ins ...
- css兼容技巧
CSS兼容常用技巧 请尽量用xhtml格式写代码,而且DOCTYPE影响 CSS 处理,作为W3C标准,一定要加DOCTYPE声明. 1.div的垂直居中问题 vertical-align:middl ...
- 你所不知道的 CSS 阴影技巧与细节 滚动视差?CSS 不在话下 神奇的选择器 :focus-within 当角色转换为面试官之后 NPOI 教程 - 3.2 打印相关设置 前端XSS相关整理 委托入门案例
你所不知道的 CSS 阴影技巧与细节 关于 CSS 阴影,之前已经有写过一篇,box-shadow 与 filter:drop-shadow 详解及奇技淫巧,介绍了一些关于 box-shadow ...
- IE和Firefox浏览器CSS兼容性技巧整理
转自:http://homepage.yesky.com/185/11484185all.shtml#p11484185 CSS兼容常用技巧(1) 更多精彩相关文章推荐: 各大浏览器 CSS3 和 H ...
- css小技巧1
资料 1. 文本省略 单行省略: white-space:nowrap; overflow:hidden; text-overflow:ellipsis; 多行文本省略: 只兼容webkit内核,不属 ...
随机推荐
- Spring Cloud Gateway 之请求坑位[微服务IP不同请求会失败]
问题产生背景 在使用Spring Cloud Gateway过程中,希望配置多Routes映射不同的微服务,因为Gateway 和Zuul的访问路径不同(zuul 会带有服务service Id),造 ...
- DefaultSerializer requires a Serializable payload but received an object of type [model.Admin]
一.问题描述: 在用redis做二级缓存时,出现如下异常 DefaultSerializer requires a Serializable payload but received an o ...
- 【面试题】Java集合部分面试题
集合与数组? 数组:(可以存储基本数据类型)是用来存储对象的一种容器,但是数组的长度固定,不适合在对象数量未知的情况下使用 集合:(只能存储对象,对象类型可以不一样)集合的长度可变,可在多数情况下使用 ...
- ORM组件LogORM使用指北
LogORM是一个对数据库进行对象关系映射的ORM组件.当对数据库进行增删改操作时,组件会自动进行日志记录. 该组件支持.Net平台和.NetCore平台,支持SQL Server.Oracle.My ...
- 使用 .gitignore 忽略 Git 仓库中的文件
.gitignore 在Git中,很多时候你只想将代码提交到仓库,而不是将当前文件目录下的文件全部提交到Git仓库中,例如在MacOS系统下面的.DS_Store文件,或者是Xocde的操作记录,又或 ...
- SpringBoot 定时任务实现方式
定时任务实现的几种方式: Timer:是java自带的java.util.Timer类,这个类允许你调度一个java.util.TimerTask任务.使用这种方式可以让你的程序按照某一个频度执行,但 ...
- java虚拟机体系分析
一.JVM的生命周期: 1)程序开始执行,他就运行,程序停止,它就结束.有几个程序在执行,就有几个虚拟机在工作.只要Java虚拟机中还有普通的线程在执行,Java虚拟机就不会停止. 2)Java虚 ...
- php导出excel乱码怎么处理
使用PHP导出excel文档,有时候莫名其妙就会出现导出的数据乱码,现在推荐一个万能修补大法 话不多说,直接上代码 核心就是在处理完数据之后,输出excel文件之前 添加 ob_end_clean() ...
- CentOS8 yum/dnf 配置国内源
CentOS8 yum/dnf 配置国内源(临时) CentOS 8更改了软件包的安装程序,取消了 yum 的配置方法,改而使用了dnf 作为安装程序.虽然改变了软件包的安装方式,但是 dnf 还是能 ...
- centos 7安装rac 11gR2时运行root.sh报错找不到ohas服务(ohasd failed to start)
单独在linux 7中为ohasd设置一个服务.步骤如下1. 创建服务ohas.service的服务文件并赋予权限touch /usr/lib/systemd/system/ohas.servicec ...