百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 技术文章 > 正文

大厂都在用的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复制了模型中可用的许多功能。使用上的关键区别是,使用模型方法会创建适当的事件通知和撤销,而使用单元进行更改时没有更改记...

按钮重复点击:这“简单”问题,为何难住大半面试者与开发者?

在前端开发中,按钮重复点击是一个看似不起眼,实则非常普遍且容易引发线上事故的问题。想象一下:提交表单时,因为网络卡顿或手抖,重复点击导致后端创建了多条冗余数据…这些场景不仅影响用户体验,更可能造成实...