大厂都在用的10个css高级技巧，我敢说你最多用过3个!不服来辩!

zhezhongyun 2025-07-09 00:20 24 浏览

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 资源，减少卡顿。

opacity 属性

上一篇：Qt Quick模块之Item（qt item model）
下一篇：移动端浏览器性能优化探索（主流移动端浏览器的开发模式和特性）

大厂都在用的10个css高级技巧，我敢说你最多用过3个!不服来辩!

1. clamp()函数：流体布局神器

2.:is() 和 :where() 高级选择器

3.CSS 动态主题切换

4. 容器查询（Container Queries）

5. 使用 backdrop-filter 创建毛玻璃效果

6.Grid 布局

7.calc() 函数

8.has 选择器

9.CSS Scroll Snap：滚动体验的精准控制

10.CSS 过渡与动画优化：性能为王的丝滑体验

相关推荐

b端详情页:各种信息聚集地，设计师要如何规划这一亩三分地呢

漏洞系列一一看我一招征服漏洞 SSRF

Web前端需要学什么?Web前端开发需要学习哪些?

接口测试遇到500报错?别慌，你的头部可能有点问题

前端Flex布局可视化布局工具介绍，vue和html5快速设计利器

「资讯」为强迫用户使用Edge浏览器，微软又出新招数

HTML 简介（html简介及优缺点）

HBuilderX，uni-app创建HTML5项目，同时支持浏览器和移动端

现在页面实时聊天都使用Websocket技术实现吗?

关于HTML5被简称做H5，你怎么看?（html5缩写）