Materialize实现质感设计依赖层级类（z-depth-）、波纹类（waves-effect）和纸张容器类（card、input-field）三者协同；任一缺失会导致阴影、反馈或浮动标签失效，且需满足父容器position:relative、结构嵌套规范、JS初始化及依赖加载顺序等前提条件。
Materialize 实现质感（Material）设计效果，不是靠“自动渲染”，而是靠三类预设 class 的协同作用：层级类（z-depth-）、波纹类（waves-effect）、纸张容器类（card、input-field）。漏掉其中任一环，阴影、反馈、浮动标签都会失效。
为什么 z-depth-1 到 z-depth-5 不生效？
常见现象是加了 z-depth-2 却看不到阴影，或阴影在移动端消失。根本原因是 Materialize 的阴影依赖于父容器的 position: relative 和子元素的 box-shadow 组合，而某些布局（如 Flex 容器、绝对定位父级）会切断层叠上下文。
-
z-depth-类只对直接子元素生效，不能嵌套使用；比如<div class="z-depth-2"><div class="z-depth-3">中的z-depth-3会被忽略 - 必须确保目标元素没有
overflow: hidden，否则阴影被裁切 - 在移动端 Safari 上，
z-depth-4和z-depth-5可能因硬件加速限制变淡，建议优先用z-depth-2或z-depth-3
card 容器为什么没“纸张感”？
单纯写 <div class="card"> 不足以触发完整质感表现。Materialize 的 card 是一个语义化结构约定，而非纯视觉 class —— 它默认启用圆角、内边距、阴影，但需要配合内部子元素才能激活完整行为。
- 必须包含至少一个标准子容器：
card-image、card-content或card-action，否则card仅表现为带圆角的空 div -
card-image内的<img>若未设置height或object-fit，会导致卡片高度塌陷，阴影被压缩 - 悬停提升层级（
hoverable）需与card同时存在：<div class="card hoverable">，单独加hoverable无效
浮动标签（floating label）不浮动，M.updateTextFields() 也不管用？
这是最常被忽略的初始化断点。Materialize 的表单质感（标签上浮、下划线动画、验证提示）完全依赖 JS 初始化，HTML class 本身不触发任何行为。
立即学习“前端免费学习笔记（深入）”；
-
input必须包裹在input-field容器中，且label的for属性必须严格匹配input的id，大小写和空格都不能错 - 页面加载后必须显式调用
M.updateTextFields()，仅靠document.addEventListener('DOMContentLoaded', ...)不够，尤其在动态插入表单后 - 如果用了 Webpack/Vite，
M可能未挂载到全局，需确认是否执行了import 'materialize-css'并正确暴露了M对象
waves-effect 点击没波纹，控制台也没报错？
波纹失效几乎总是因为依赖链断裂。Materialize 的 waves-effect 不是纯 CSS 动画，它依赖 velocity.js 执行 transform 和 opacity 动画，且需 jQuery 提供事件委托基础。
- 检查加载顺序是否为：
<script src="jquery"></script>→<script src="velocity"></script>→<script src="materialize"></script>，缺一或顺序错，波纹就静音 -
waves-effect只作用于可点击元素（button、a、带onclick的div），对span或纯文本无效 - 若元素被
pointer-events: none覆盖（例如遮罩层未移除），波纹也不会触发
质感不是加几个 class 就能“长出来”的东西。它由阴影层级、动效反馈、结构约束三者咬合驱动，任意一环松动，整个质感系统就会局部失重——这也是为什么很多人照着文档写却总觉得“不像 Material”。
