-
clear:both仅在浮动导致内容塌陷、错位或父容器高度塌陷时必需，用于让元素避开上方左右浮动框；现代方案优先选用display:flow-root或Flex/Grid布局。
-
z-index不生效的主因是元素未定位或处于独立层叠上下文中；必须设置position且避免父级触发opacity、transform等新层叠上下文，否则子元素z-index仅在内部有效。
-
必须为父容器设置display:grid或inline-grid才能使align-items:center生效；它仅作用于直接子元素在交叉轴的对齐，且容器需有明确高度（如min-height:100vh）才能体现居中效果。
-
favicon不显示的根本原因是浏览器强缓存、路径错误或格式兼容性问题；需检查图标能否直连访问、Network中状态码是否200、服务器是否放行/favicon.ico路径，并优先使用多尺寸ICO而非伪ICO。
-
checkboxhack是利用checkbox的:checked伪类配合CSS选择器实现显隐控制的纯CSS技术；它依赖HTML结构（label关联input）、隐藏原生控件、合理使用visibility/opacity/max-height动画，并注意移动端点击区域与兼容性限制。
-
防抖与节流机制不同：防抖是“停手后执行一次”，节流是“固定频率最多执行一次”；防抖需闭包保存timer、清除重设、正确传递this和参数，并支持immediate模式。
-
纯CSS主题色缓动的关键是给使用变量的属性（如color、background-color）加transition，而非给CSS变量本身；JS仅切换data-theme等状态，由CSS响应并插值。
-
Vue页面白屏需分段定位：先查Elements确认#app是否存在，再通过beforeCreate、created、beforeMount、mounted钩子埋点日志，重点排查created中API未catch、mounted中ref未定义等异步/依赖错误。
-
骨架屏是页面数据加载前的灰色轮廓占位，微信开发者工具可自动生成skeleton.wxml与wxss文件，通过wx:if控制显隐，需随页面布局更新而同步调整。
-
lvh/svh是CSS新增视口单位，lvh表示不考虑软键盘的最大可用高度，svh表示键盘弹出时的最小可用高度；相比100vh，它们原生响应键盘状态，避免iOS底部fixed元素被遮挡及安卓高度突变问题。
-
遮罩文字不居中需确保父容器设position:relative；hover闪动应搭配transform过渡与pointer-events控制；flex/Grid下遮罩须显式设宽高；移动端需处理z-index、pointer-events及hover/active/媒体查询兼容。
-
必须将perspective设在卡片父容器（如.card-container）上，值取800–1200px；子元素需设transform-style:preserve-3d和backface-visibility:hidden，并显式声明rotateY(0deg)起始态。
-
e.preventDefault()有时无效的主因是事件未绑定到真正触发目标：如监听却点击其子元素，或在表单中误监听click而非submit；href="#"会触发锚点滚动且preventDefault无法阻止；古董浏览器需兼容e.returnValue=false；框架中修饰符须直接作用于标签本身。
-
ruby标签加拼音需rb与rt成对使用并配合CSS样式，单独<ruby>汉<rt>hàn</rt></ruby>因缺rb且未设font-size、line-height等会导致不显示或错位；多字须分rb+rt逐字标注，避免语义错位。
-
推荐SVGpath方案因其动画平滑、兼容性好、可控性强；clip-path在Safari等浏览器不支持属性插值致跳变，background-image依赖外部资源且接缝难调；SVG可通过d属性精确控制贝塞尔曲线，配合transform或JS更新实现高精度动画。
