## 1. clamp()函数：流体布局神器 **应用场景：** 苹果官网响应式字号、淘宝商品卡片宽度自适应。代码案例： ```css

这是一段使用 clamp() 函数实现响应式排版的文字内容。公众号：知否技术

``` ![](https://p9-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/2700a7d3a13847c6b69847c8cf3720df~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg55-l5ZCm5oqA5pyv:q75.awebp?rk3s=f64ab15b&x-expires=1765602405&x-signature=AOljGGx0gXLdt3SKKVHE%2FuR%2FjHk%3D) > 讲解：clamp() 函数可使文字排版在视口大小变化时平滑缩放，无需媒体查询。其第一个参数是最小字体大小，第三个参数是最大字体大小，中间的值可以是视口宽度百分比等相对单位，确保文字在不同设备上显示效果适中。 ## 2.:is() 和 :where() 高级选择器 **应用场景：** 在微软的 Office 在线办公平台中，文档编辑页面中有各种不同类型的元素，如标题、段落、列表等。通过使用 :is() 和 :where() 高级选择器，可以更灵活、简洁地为这些不同类型的元素统一设置样式，同时提高样式的可读性和可维护性，加快样式的开发和优化速度。代码案例： ```css 知否技术

文档标题

段落文本 1

列表项 1
列表项 2

段落文本 2

``` ![](https://p9-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/81d304932eb44b69acc6b14917fe53f4~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg55-l5ZCm5oqA5pyv:q75.awebp?rk3s=f64ab15b&x-expires=1765602405&x-signature=%2FJa7wpqeK37jF2Yszjr2LhQa4Lg%3D) > 讲解：:is() 和 :where() 选择器就像是 CSS 中的 “多选工具”，它们可以一次性匹配多个不同类型的元素，然后对这些匹配到的元素统一应用相同的样式规则。这样就可以避免重复编写大量的相同样式代码，让样式表更加简洁、高效，同时也方便后续对样式的修改和维护 ## 3.CSS 动态主题切换 **应用场景：** 微信的暗黑模式通过动态 CSS 变量实现全局主题切换，用户点击按钮即可切换颜色方案。代码案例： ```css ``` ![](https://p9-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/972bfc638b48408ab2649c3bbbf3e488~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg55-l5ZCm5oqA5pyv:q75.awebp?rk3s=f64ab15b&x-expires=1765602405&x-signature=VQ48Wv0KgyViGQIc01SQdfoCaUA%3D) > 讲解：CSS 动态主题切换就像是给页面准备了几套不同颜色的 “衣服”，根据用户的选择或者系统的设置，可以快速地为页面换上合适的 “衣服”，改变页面的整体颜色风格，比如从明亮的浅色主题切换到适合夜间使用的深色主题。这种技术能够提升用户体验，让用户在不同的使用场景下都能舒适地浏览页面 ## 4. 容器查询（Container Queries） **应用场景：** 在阿里、京东等电商大厂的移动端页面中，商品卡片组件会根据所在容器的大小调整布局，如在窄容器中显示单列，在宽容器中显示多列。代码案例： ```css

商品信息

``` ![](https://p9-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/3107c3816b424e7a8d2496865dbfa087~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg55-l5ZCm5oqA5pyv:q75.awebp?rk3s=f64ab15b&x-expires=1765602405&x-signature=oRO61k3%2FnyEDknE0jfAldqBjxy4%3D) ![](https://p9-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/773ce5a685484d1294ae853832079543~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg55-l5ZCm5oqA5pyv:q75.awebp?rk3s=f64ab15b&x-expires=1765602405&x-signature=XrOHXnhqrP2We46mwUdtckKiPl8%3D) > 讲解：过去组件布局多依赖于视口媒体查询，组件复用性差。容器查询使组件能根据父容器大小调整样式，提高了组件的独立性和可复用性。 ## 5. 使用 backdrop-filter 创建毛玻璃效果 **应用场景：** 支付宝的红包弹窗通过 CSS 遮罩实现了毛玻璃效果，而淘宝的促销标签则使用混合模式叠加颜色。代码案例： ```css

限时折扣

``` ![](https://p9-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/b9d3eb4a9f3940e88be6b05127cfb432~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg55-l5ZCm5oqA5pyv:q75.awebp?rk3s=f64ab15b&x-expires=1765602405&x-signature=emCPOziSqyyNbzUtiXtBXbSRgP4%3D) > 讲解：backdrop-filter 属性可为元素添加背景模糊效果，从而实现毛玻璃效果。这种效果在现代 UI 设计中很常见，可使界面更具层次感和视觉深度，常用于模态框、弹窗等场景，让内容在模糊背景上更突出。 ## 6.Grid 布局 **应用场景：** 网易云音乐的网页布局，用 CSS 网格区域打造复杂页面布局，如首页的头部导航、中间内容区和底部播放器。代码案例： ```css

内容区

``` ![](https://p9-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/624b12bb9ee4479ca43a3e491c329e0d~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg55-l5ZCm5oqA5pyv:q75.awebp?rk3s=f64ab15b&x-expires=1765602405&x-signature=n%2FFvi320ePETkjcNxoGJcYnMo54%3D) > 讲解：之前做复杂布局要套很多层，Grid网格布局能直接定义元素在网格中的位置，简单清晰，可创建各种复杂布局。 ## 7.calc() 函数 **应用场景：** 在百度地图的布局中，用 calc() 函数计算地图容器的尺寸，减去固定高度的头部和底部。代码案例： ```css

地图内容

``` ![](https://p9-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/1b467bc067b34504a17de7568e6ebe99~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg55-l5ZCm5oqA5pyv:q75.awebp?rk3s=f64ab15b&x-expires=1765602405&x-signature=By4SOGyXyvo0Wlpmp0D5wqLt1gk%3D) > 讲解：calc() 函数可在 CSS 中进行计算，方便根据已有尺寸动态调整元素大小，解决复杂布局中的尺寸计算问题。 ## 8.has 选择器 **应用场景：** 在微博的网页版中，用 :has() 选择器给有热门标签的微博内容添加特殊样式，使其更突出。代码案例： ```css

普通微博内容

热门

热门微博内容

``` ![](https://p9-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/0dfce116596a49ad8ce384f8ff464a4f~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg55-l5ZCm5oqA5pyv:q75.awebp?rk3s=f64ab15b&x-expires=1765602405&x-signature=jII2Itf0S6owj3%2FJ6GaJiUsTu%2B4%3D) > 讲解：以往难以根据子元素状态直接改变父元素样式，:has() 选择器可实现这一功能，让样式控制更灵活。 ## 9.CSS Scroll Snap：滚动体验的精准控制 **应用场景：** 支付宝的支付流程引导页通过 Scroll Snap 实现了步骤化导航，用户滚动时自动吸附到每个步骤的中心。代码案例： ```css

``` ![](https://p9-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/b862d81cf12a49c88f69198dbeba119a~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg55-l5ZCm5oqA5pyv:q75.awebp?rk3s=f64ab15b&x-expires=1765602405&x-signature=%2FHTRThN%2BN9c9B7qddluUM6V6%2Bhs%3D) > 讲解：Scroll Snap 通过 scroll-snap-type 和 scroll-snap-align 属性，让滚动容器精准吸附到指定位置。在支付流程中，用户每滚动一屏，系统自动对齐到下一个步骤的中心，配合 scrollbar-gutter 预分配滚动条空间，避免布局抖动，提升交互体验。 ## 10.CSS 过渡与动画优化：性能为王的丝滑体验 **应用场景：** 淘宝的商品详情页通过 will-change 属性优化了图片缩放动画，避免主线程阻塞。代码案例： ```css

``` ![](https://p9-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/afa87dc3c85e4bb99ccdf0b8a213df83~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg55-l5ZCm5oqA5pyv:q75.awebp?rk3s=f64ab15b&x-expires=1765602405&x-signature=neMcv4MNMehBK6Jty7kHp3uEhbs%3D) > 讲解：will-change 属性提前通知浏览器元素即将发生的变化，使其可以提前优化资源分配。结合 transform 和 opacity 等硬件加速属性，动画性能显著提升。例如，图片悬停缩放时，通过 will-change: transform 提示浏览器提前准备 GPU 资源，减少卡顿。