大厂都在用的10个css高级技巧,我敢说你最多用过3个!不服来辩!
zhezhongyun 2025-07-09 00:20 1 浏览
1. clamp()函数:流体布局神器
应用场景:苹果官网响应式字号、淘宝商品卡片宽度自适应。
代码案例 :
<style>
.clamp-text {
font-size: clamp(1rem, 2vw, 2rem);
line-height: 1.2;
padding: 15px;
background-color: green;
}
</style>
<div class="clamp-text">这是一段使用 clamp() 函数实现响应式排版的文字内容。公众号:知否技术</div>
讲解 :clamp() 函数可使文字排版在视口大小变化时平滑缩放,无需媒体查询。其第一个参数是最小字体大小,第三个参数是最大字体大小,中间的值可以是视口宽度百分比等相对单位,确保文字在不同设备上显示效果适中 。
2.:is() 和 :where() 高级选择器
应用场景:在微软的 Office 在线办公平台中,文档编辑页面中有各种不同类型的元素,如标题、段落、列表等。通过使用 :is() 和 :where() 高级选择器,可以更灵活、简洁地为这些不同类型的元素统一设置样式,同时提高样式的可读性和可维护性,加快样式的开发和优化速度。
代码案例:
<!DOCTYPE html>
<html lang="en">
<head>
<title>知否技术</title>
<style>
/* 使用 :is() 选择器 */
article :is(h1, p, li) {
margin-bottom: 15px;
color: red;
}
/* 使用 :where() 选择器 */
article :where(h1, p, li) {
line-height: 1.6;
}
</style>
</head>
<body>
<article>
<h1>文档标题</h1>
<p>段落文本 1</p>
<ul>
<li>列表项 1</li>
<li>列表项 2</li>
</ul>
<p>段落文本 2</p>
</article>
</body>
</html>
讲解::is() 和 :where() 选择器就像是 CSS 中的 “多选工具”,它们可以一次性匹配多个不同类型的元素,然后对这些匹配到的元素统一应用相同的样式规则。这样就可以避免重复编写大量的相同样式代码,让样式表更加简洁、高效,同时也方便后续对样式的修改和维护
3.CSS 动态主题切换
应用场景:微信的暗黑模式通过动态 CSS 变量实现全局主题切换,用户点击按钮即可切换颜色方案。
代码案例:
<!DOCTYPE html>
<html>
<head>
<style>
:root {
--primary-color: #4361ee;
--background-color: #fff;
--text-color: #1a1a2e;
}
.dark-mode {
--primary-color: #4cc9f0;
--background-color: #1a1a2e;
--text-color: #f8f9fa;
}
body {
background-color: var(--background-color);
color: var(--text-color);
transition: all 0.3s ease;
}
button {
background-color: var(--primary-color);
color: white;
padding: 10px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
}
</style>
</head>
<body>
<button onclick="toggleTheme()">切换主题</button>
<script>
function toggleTheme() {
document.body.classList.toggle('dark-mode');
}
</script>
</body>
</html>
讲解:CSS 动态主题切换就像是给页面准备了几套不同颜色的 “衣服”,根据用户的选择或者系统的设置,可以快速地为页面换上合适的 “衣服”,改变页面的整体颜色风格,比如从明亮的浅色主题切换到适合夜间使用的深色主题。这种技术能够提升用户体验,让用户在不同的使用场景下都能舒适地浏览页面
4. 容器查询(Container Queries)
应用场景:在阿里、京东等电商大厂的移动端页面中,商品卡片组件会根据所在容器的大小调整布局,如在窄容器中显示单列,在宽容器中显示多列。
代码案例:
<!DOCTYPE html>
<html>
<head>
<style>
.card {
container-type: inline-size;
width: 200px;
background-color: #f0f0f0;
}
@container (min-width: 400px) {
.card-content {
display: flex;
padding: 10px;
}
}
@container (max-width: 200px) {
.card-content {
padding: 5px;
color: red;
}
}
</style>
</head>
<body>
<div class="container">
<div class="card">
<div class="card-content">商品信息</div>
</div>
</div>
</body>
</html>
讲解:过去组件布局多依赖于视口媒体查询,组件复用性差。容器查询使组件能根据父容器大小调整样式,提高了组件的独立性和可复用性。
5. 使用 backdrop-filter 创建毛玻璃效果
应用场景:支付宝的红包弹窗通过 CSS 遮罩实现了毛玻璃效果,而淘宝的促销标签则使用混合模式叠加颜色。
代码案例:
<!DOCTYPE html>
<html>
<head>
<style>
.promotion-badge {
position: absolute;
top: 10px;
right: 10px;
padding: 5px 10px;
background: linear-gradient(135deg, #ff6b6b, #ee5253);
color: white;
border-radius: 4px;
clip-path: polygon(0 0, 100% 0, 100% 100%, 20% 100%, 0 80%);
mix-blend-mode: screen;
}
.product-image {
width: 300px;
height: 300px;
background-image: url('product.jpg');
filter: blur(2px);
}
</style>
</head>
<body>
<div class="product-image">
<div class="promotion-badge">限时折扣</div>
</div>
</body>
</html>
讲解:backdrop-filter 属性可为元素添加背景模糊效果,从而实现毛玻璃效果。这种效果在现代 UI 设计中很常见,可使界面更具层次感和视觉深度,常用于模态框、弹窗等场景,让内容在模糊背景上更突出。
6.Grid 布局
应用场景:网易云音乐的网页布局,用 CSS 网格区域打造复杂页面布局,如首页的头部导航、中间内容区和底部播放器。
代码案例:
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: grid;
grid-template-areas: "header header" "sidebar content" "footer footer";
grid-gap: 10px;
width: 500px;
height: 400px;
}
.header {
grid-area: header;
background-color: #f0f0f0;
}
.sidebar {
grid-area: sidebar;
background-color: #e0e0e0;
}
.content {
grid-area: content;
background-color: #d0d0d0;
}
.footer {
grid-area: footer;
background-color: #c0c0c0;
}
</style>
</head>
<body>
<div class="container">
<div class="header">头部</div>
<div class="sidebar">侧边栏</div>
<div class="content">内容区</div>
<div class="footer">底部</div>
</div>
</body>
</html>
讲解:之前做复杂布局要套很多层,Grid网格布局能直接定义元素在网格中的位置,简单清晰,可创建各种复杂布局。
7.calc() 函数
应用场景:在百度地图的布局中,用 calc() 函数计算地图容器的尺寸,减去固定高度的头部和底部。
代码案例:
<!DOCTYPE html>
<html>
<head>
<style>
.map-container {
height: 100vh;
}
.header,
.footer {
height: 60px;
background-color: #f0f0f0;
padding: 10px;
}
.map-content {
height: calc(100% - 120px);
background-color: #e0e0e0;
}
</style>
</head>
<body>
<div class="map-container">
<div class="header">地图头部</div>
<div class="map-content">地图内容</div>
<div class="footer">地图底部</div>
</div>
</body>
</html>
讲解:calc() 函数可在 CSS 中进行计算,方便根据已有尺寸动态调整元素大小,解决复杂布局中的尺寸计算问题。
8.has 选择器
应用场景:在微博的网页版中,用 :has() 选择器给有热门标签的微博内容添加特殊样式,使其更突出。
代码案例:
<!DOCTYPE html>
<html>
<head>
<style>
.weibo-item {
padding: 10px;
margin-bottom: 10px;
border: 1px solid #ddd;
}
.weibo-item:has(.hot-tag) {
border-color: #ff0000;
background-color: #fff8f8;
}
.hot-tag {
display: inline-block;
background-color: #ff0000;
color: white;
padding: 2px 5px;
margin-bottom: 5px;
font-size: 12px;
}
</style>
</head>
<body>
<div class="weibo-container">
<div class="weibo-item">
<div class="weibo-content">普通微博内容</div>
</div>
<div class="weibo-item">
<div class="hot-tag">热门</div>
<div class="weibo-content">热门微博内容</div>
</div>
</div>
</body>
</html>
讲解:以往难以根据子元素状态直接改变父元素样式,:has() 选择器可实现这一功能,让样式控制更灵活。
9.CSS Scroll Snap:滚动体验的精准控制
应用场景:支付宝的支付流程引导页通过 Scroll Snap 实现了步骤化导航,用户滚动时自动吸附到每个步骤的中心。
代码案例:
<!DOCTYPE html>
<html>
<head>
<style>
.steps-container {
overflow-x: auto;
white-space: nowrap;
scroll-snap-type: x mandatory;
scrollbar-gutter: stable both-edges;
}
.step {
display: inline-block;
width: 100vw;
height: 80vh;
scroll-snap-align: center;
background-size: cover;
background-position: center;
}
.step-1 {
background-image: url('https://placebear.com/1000/500');
}
.step-2 {
background-image: url('https://picsum.photos/1000/500');
}
.step-3 {
background-image: url('https://loremflickr.com/1000/500');
}
</style>
</head>
<body>
<div class="steps-container">
<div class="step step-1"></div>
<div class="step step-2"></div>
<div class="step step-3"></div>
</div>
</body>
</html>
讲解:Scroll Snap 通过 scroll-snap-type 和 scroll-snap-align 属性,让滚动容器精准吸附到指定位置。在支付流程中,用户每滚动一屏,系统自动对齐到下一个步骤的中心,配合 scrollbar-gutter 预分配滚动条空间,避免布局抖动,提升交互体验。
10.CSS 过渡与动画优化:性能为王的丝滑体验
应用场景:淘宝的商品详情页通过 will-change 属性优化了图片缩放动画,避免主线程阻塞。
代码案例:
<!DOCTYPE html>
<html>
<head>
<style>
.image-container {
width: 300px;
height: 300px;
overflow: hidden;
will-change: transform;
transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.image-container:hover {
transform: scale(1.1);
}
</style>
</head>
<body>
<div class="image-container">
<img src="https://picsum.photos/1000/500" alt="商品图片">
</div>
</body>
</html>
讲解:will-change 属性提前通知浏览器元素即将发生的变化,使其可以提前优化资源分配。结合 transform 和 opacity 等硬件加速属性,动画性能显著提升。例如,图片悬停缩放时,通过 will-change: transform 提示浏览器提前准备 GPU 资源,减少卡顿。
相关推荐
- 一篇文章带你了解SVG 渐变知识(svg动画效果)
-
渐变是一种从一种颜色到另一种颜色的平滑过渡。另外,可以把多个颜色的过渡应用到同一个元素上。SVG渐变主要有两种类型:(Linear,Radial)。一、SVG线性渐变<linearGradie...
- Vue3 实战指南:15 个高效组件开发技巧解析
-
Vue.js作为一款流行的JavaScript框架,在前端开发领域占据着重要地位。Vue3的发布,更是带来了诸多令人兴奋的新特性和改进,让开发者能够更高效地构建应用程序。今天,我们就来深入探讨...
- CSS渲染性能优化(低阻抗喷油器阻值一般为多少欧)
-
在当今快节奏的互联网环境中,网页加载速度直接影响用户体验和业务转化率。页面加载时间每增加100毫秒,就会导致显著的流量和收入损失。作为前端开发的重要组成部分,CSS的渲染性能优化不容忽视。为什么CSS...
- 前端面试题-Vue 项目中,你做过哪些性能优化?
-
在Vue项目中,以下是我在生产环境中实践过且用户反馈较好的性能优化方案,整理为分类要点:一、代码层面优化1.代码分割与懒加载路由懒加载:使用`()=>import()`动态导入组件,结...
- 如何通过JavaScript判断Web页面按钮是否置灰?
-
在JavaScript语言中判断Web页面按钮是否置灰(禁用状态),可以通过以下几种方式实现,其具体情形取决于按钮的禁用方式(原生disabled属性或CSS样式控制):一、检查原生dis...
- 「图片显示移植-1」 尝试用opengl/GLFW显示图片
-
GLFW【https://www.glfw.org】调用了opengl来做图形的显示。我最近需要用opengl来显示图像,不能使用opencv等库。看了一个glfw的官网,里面有github:http...
- 大模型实战:Flask+H5三件套实现大模型基础聊天界面
-
本文使用Flask和H5三件套(HTML+JS+CSS)实现大模型聊天应用的基本方式话不多说,先贴上实现效果:流式输出:思考输出:聊天界面模型设置:模型设置会话切换:前言大模型的聊天应用从功能...
- ae基础知识(二)(ae必学知识)
-
hi,大家好,我今天要给大家继续分享的还是ae的基础知识,今天主要分享的就是关于ae的路径文字制作步骤(时间关系没有截图)、动态文字的制作知识、以及ae特效的扭曲的一些基本操作。最后再次复习一下ae的...
- YSLOW性能测试前端调优23大规则(二十一)---避免过滤器
-
AlphalmageLoader过滤器是IE浏览器专有的一个关于图片的属性,主要是为了解决半透明真彩色的PNG显示问题。AlphalmageLoader的语法如下:filter:progid:DX...
- Chrome浏览器的渲染流程详解(chrome预览)
-
我们来详细介绍一下浏览器的**渲染流程**。渲染流程是浏览器将从网络获取到的HTML、CSS和JavaScript文件,最终转化为用户屏幕上可见的、可交互的像素画面的过程。它是一个复杂但高度优...
- 在 WordPress 中如何设置背景色透明度?
-
最近开始写一些WordPress专业的知识,阅读数奇低,然后我发一些微信昵称技巧,又说我天天发这些小学生爱玩的玩意,写点文章真不容易。那我两天发点专业的东西,两天发点小学生的东西,剩下三天我看着办...
- manim 数学动画之旅--图形样式(数学图形绘制)
-
manim绘制图形时,除了上一节提到的那些必需的参数,还有一些可选的参数,这些参数可以控制图形显示的样式。绘制各类基本图形(点,线,圆,多边形等)时,每个图形都有自己的默认的样式,比如上一节的图形,...
- Web页面如此耗电!到了某种程度,会是大损失
-
现在用户上网大多使用移动设备或者笔记本电脑。对这两者来说,电池寿命都很重要。在这篇文章里,我们将讨论影响电池寿命的因素,以及作为一个web开发者,我们如何让网页耗电更少,以便用户有更多时间来关注我们的...
- 11.mxGraph的mxCell和Styles样式(graph style)
-
3.1.3mxCell[翻译]mxCell是顶点和边的单元对象。mxCell复制了模型中可用的许多功能。使用上的关键区别是,使用模型方法会创建适当的事件通知和撤销,而使用单元进行更改时没有更改记...
- 按钮重复点击:这“简单”问题,为何难住大半面试者与开发者?
-
在前端开发中,按钮重复点击是一个看似不起眼,实则非常普遍且容易引发线上事故的问题。想象一下:提交表单时,因为网络卡顿或手抖,重复点击导致后端创建了多条冗余数据…这些场景不仅影响用户体验,更可能造成实...
- 一周热门
- 最近发表
- 标签列表
-
- HTML 教程 (33)
- HTML 简介 (35)
- HTML 实例/测验 (32)
- HTML 测验 (32)
- JavaScript 和 HTML DOM 参考手册 (32)
- HTML 拓展阅读 (30)
- HTML文本框样式 (31)
- HTML滚动条样式 (34)
- HTML5 浏览器支持 (33)
- HTML5 新元素 (33)
- HTML5 WebSocket (30)
- HTML5 代码规范 (32)
- HTML5 标签 (717)
- HTML5 标签 (已废弃) (75)
- HTML5电子书 (32)
- HTML5开发工具 (34)
- HTML5小游戏源码 (34)
- HTML5模板下载 (30)
- HTTP 状态消息 (33)
- HTTP 方法:GET 对比 POST (33)
- 键盘快捷键 (35)
- 标签 (226)
- HTML button formtarget 属性 (30)
- CSS 水平对齐 (Horizontal Align) (30)
- opacity 属性 (32)