16个CSS常用技巧的代码片段

AI摘要
Deepseek提供支持

1、利用 CSS穿透覆盖默认样式

常见发生场景:假如我们需要通过 input,type=”file”来上传文件,而这个 input 的默认样式,可以说是非常地丑。
所以我们希望通过一张图片,与这个 input 大小一样,位置一致地盖在上面。这个时候,显然,这个时候点击图片,input 是不会起作用的。
就是因为 img 隔绝了 click 的穿透,而我们希望的是,这个 img 只是视觉上遮挡了 input 的样式,但是点击的时候还是点击到 input。所以,只要让 img 可穿透即可。
CSS代码如下:

img { pointer-events: none;}

2、实现自定义原生 select 控件的样式

由于 select 移动端原生样式很丑,但是原生弹出效果是符合我们设计的原则。
直接修改 select 的样式的时候,一个奇怪的现象出现了,在 chrome 上调试的时候,自己定义的样式起了作用,在 Android 手机上也起了作用,但是到了 ios 手机上就不行了,典型的不兼容问题,这个时候禁用原生的样式即可。
代码如下:

select { -webkit-appearance: none;}

广告
广告图片

3、文本溢出处理

移动设备相对来说页面较小,很多时候显示的一些信息都需要省略部分。最常见的是单行标题溢出省略,多行详情介绍溢出省略。
现在都用框架开发了,这种建议需求建议形成一个基础组件,方便快捷。
css 代码如下:

//单行
.single { overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
//多行
.more { display: -webkit-box !important; overflow: hidden; text-overflow: ellipsis; work-break: break-all; -webkit-box-orient: vertical; -webkit-line-clamp:
2; //指定行数
}

 

4、开启弹性滚动

CSS 代码如下:

body { overflow: scroll; -webkit-overflow-scrolling: touch;}

注意:Android 不支持原生的弹性滚动,但可以借助第三方库 iScroll 来实现。

5、 一像素边框设置

很多时候,想保持边框的大小在任何设置上都是 1px,但是因为 1px 使用 2dp 渲染,也就是说会显示为 2px 大小。所以,要采用 css3 缩放一下。
css 代码如下:

.folder li { position: relative; padding: 5px;}.folder li + li:before { position: absolute; top: -1px; left: 0; content: " "; width: 100%; height: 1px; border-top: 1px solid #ccc; -webkit-transform: scaleY(0.5);}

 

6、防止鼠标选中事件

<div class="mask" onselectstart="return false"></div><div class="link"> <a href="javascrip;;">登录</a></div>

给元素添加了onslectstart=”return false”,就可以防止鼠标选中事件。

7、给动态添加的元素绑定事件

利用事件代理达到这个效果即可。如:

$(document).on("click", ".large", slide); //jq中的写法//第一个参数表示的是对应事件,第二个是需要绑定事件的元素的id或class,第三个是绑定的对应的事件函数名

8、兼容 IE 浏览器的透明度处理

.ui { width: 100%; height: 100%; opacity: 0.4; filter: Alpha(opacity=40); //兼容IE浏览器的处理}

 

9、常用的全屏居中 js 函数

//获取元素function getElement(ele) { return document.getElementById(ele);}//自动居中函数function autoCenter(el) { var bodyX = document.documentElement.offsetWidth || document.body.offsetWidth; var bodyY = document.documentElement.offsetHeight || document.body.offsetHeight; var elementX = el.offsetWidth; var elementY = el.offsetHeight; el.style.left = (bodyX - elementX) / 2 + "px"; el.style.top = (bodyY - elementY) / 2 + "px";}

10、常用的全屏居中 css 函数

body { height: 100vh; text-align: center; line-height: 100vh;}

11、在输入框输入完内容并按回车的时候进行判断

比如说输入完 11000 在按下回车的时候。

<input type="textbox" id="textbox1" onkeypress="CheckInfo" /> <script language="JavaScript" type="text/JavaScript"> function CheckInfo(){ if (event.keyCode==13) { alert(textbox1.text); } }</script>

12、chrome 调试快捷键

① ctrl+shift+f 全文查找
② ctrl+o 查找文件名
③ ctrl+shift+o 查找 js 函数名

13、创建剪切动画

对于剪切动画,使用clip-path代替width/height,避免DOM重排导致性能过低。

.animate { width: 200px; height: 200px; background: #000; animation: 1s clip;}@keyframes clip { 0% { clip-path: inset(0 0 0 0); } 100% { clip-path: inset(0 100% 100% 0); }}

clip-path也能用来进行其他规则/不规则图形的剪切。

.clip { clip-path: polygon(0 100%, 50% 0, 100% 100%, 0 30%, 100% 30%); /* 多边形 */ clip-path: circle(30px at 35px 35px); /* 圆形 */ clip-path: ellipse(30px 25px at 35px 35px); /* 椭圆 */}

 

14、优化动画性能

除了使用transform3d开启gpu加速,还可以使用will-change强制gpu加速优化动画性能。

.animate { width: 200px; height: 200px; background: #000; animation: 1s clip; will-change: clip-path;}@keyframes clip { 0% { clip-path: inset(0 0 0 0); } 100% { clip-path: inset(0 100% 100% 0); }}

15、实现长宽比

使用padding模拟,然后子元素使用绝对定位

/* 1:1 */.container { width: 200px;}.container:after { display: block; content: ' '; padding-top: 100%;}/* 16:9 */.container { width: 200px;}.container:after { display: block; content: ' '; padding-top: calc(100% * 9 / 16);}

16、垂直居中

我们常用的方式:
  • dislay: inline-block
  • top: 50% + transform: tranlsateY(-50%)
  • display: flex
其余还有padding上下撑高、display: table、position + margin: auto、绝对定位 + margin等等,这些属于不常用、特殊场景才能用、css3之前的hack方式,css3之后就不必使用这些来实现垂直居中,就不多说了。
其中display: flex属于万金油,大多数场景可以直接用它,但还是有些特殊的场景不能用:
  • 子元素需要文字截断,为了兼容4.X的Android浏览器,必须使用其他方式(一般是transform)
  • 子元素需要多行布局,4.x的Android不支持flex-wrap,不能多行布局
本文完~
广告
广告图片
温馨提示 : 非特殊注明,否则均为©李联华的博客网原创文章,本站文章未经授权禁止任何形式转载;来自:俄亥俄州·哥伦布 ,欢迎您的访问!
文章链接:https://www.lilianhua.com/16-code-snippets-of-common-css-skills.html
请先登录才能参与答题
距本场结束剩 00 00 00 00
轻量应用服务器 2核2G
200M峰值带宽,适用于网站搭建、Web应用、容器环境、电商独立站等
立即前往
扫码进入
扫描二维码购买
文澜千文

文澜千文

请登录以使用此功能。

孕味食足 0糖黑芝麻饼干288g 孕妇零食健康薄脆酥饼下午茶高钙儿童饼干 孕味食足 0糖黑芝麻饼干288g 孕妇零食健康薄脆酥饼下午茶高钙儿童饼干
Loading...
OpenClaw

OpenClaw 龙虾

AI AGENT GATEWAY
在您的服务器部署 OpenClaw,打造专属极速 AI 助手。
零门槛一键部署环境
支持 QQ/飞书/微信 渠道
跨平台指令分发执行
立即安装