-
面包屑导航需手动维护而非自动推导，纯静态页中必须通过HTML硬编码或构建脚本注入路径映射，确保每级链接真实有效且语义正确，兼顾SEO、可访问性与用户体验。
-
展开运算符...是JavaScript中对可迭代对象或类数组对象进行逐项取出的操作符；它只在需多个独立值的位置生效，如函数调用、数组/对象字面量中，不可单独使用或在赋值左侧。
-
querySelector方法用于查找文档中第一个匹配指定CSS选择器的元素。其核心特点是“选择器”和“第一个”，若需操作所有匹配项则应使用querySelectorAll；对于不存在的元素，它返回null，因此必须进行空值检查以避免错误；此外，虽然支持复杂选择器，但建议保持简洁以提升可维护性与性能。
-
flex属性三值依次为flex-grow、flex-shrink、flex-basis，不可调换；按比例分配宽度只需设flex-grow，且flex-basis应为0（非auto）以避免内容宽干扰；margin/border会侵占剩余空间，推荐用gap和box-sizing:border-box保障比例准确。
-
:disabled伪类仅对原生可禁用表单元素（button、input等）生效，div/span等通用标签添加disabled属性无效；需确保属性真实透传至合法DOM节点，否则应改用类名控制样式。
-
box-shadow叠太多会卡顿甚至白屏，因每条阴影都需独立模糊、合成与重绘，易致GPU内存溢出或主线程阻塞；单元素建议不超过20条，爆炸效果宜用5–8层+scale动画实现。
-
阴影过重主因是使用不透明纯色，应改用带alpha通道的rgba值（如rgba(0,0,0,0.15)），并配合调整模糊半径、偏移量及颜色倾向以增强自然感和界面呼吸感。
-
解决height过渡无效的核心是让浏览器知道目标高度并平滑过渡：①max-height方案（兼容性好）；②transformscaleY方案（性能优但影响文档流）；③JS+scrollHeight方案（精确控制）；④@starting-style实验性方案（Chrome115+）。
-
应使用rgba设置导航栏背景透明度，如background-color:rgba(51,51,51,0.8)，兼顾视觉层次与内容可读性；文字宜用纯白并加阴影；滚动时可通过JS动态调整alpha值实现渐变效果。
-
本文介绍如何使用JavaScript为两个按钮（“on”和“off”）绑定交互逻辑，点击“on”时显示一张图片、隐藏另一张，点击“off”时反之，实现双图切换效果，并提供可复用的布尔状态控制方案。
-
用createElement创建元素需设置内容、属性并手动插入；优先用classList和dataset操作类与data属性；批量渲染用DocumentFragment提升性能；动态事件用事件代理避免重复绑定。
-
绝对定位使元素脱离Flex布局流，不参与flex排列与对齐；应让flex子项设position:relative创建定位上下文，再用absolute子元素锚定；避免同一元素既flex又absolute，改用margin-left:auto或transform微调更安全。
-
CSS中font-size支持transition，但需用稳定单位（如px）、显式声明起止值并写在基础选择器上；否则因单位不一致或继承链变动导致失效。
-
Canvas2D是目前HTML5中唯一可控、可复现真实水墨质感的方式，需通过getImageData获取像素、Sobel边缘检测、距离衰减与高斯扩散实现晕染飞白；CSS滤镜仅能辅助营造氛围，WebGL方案适合高性能动态渲染。
-
CSSTidy因长期不维护、不支持现代CSS语法（如自定义属性、嵌套、@layer）、静默丢弃规则、解析错误且性能差，已被PostCSS+cssnano或lightningcss等更稳定可控的工具替代。
