大厂都在用的5个css高级技巧！！！

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>