-
页面标题必须唯一且置于<head>内；<title>内容为空或含空格将导致标签页显示文件名、SEO失效；动态修改须用document.title而非DOM操作；SPA需手动更新，构建工具配置可能覆盖模板中的<title>。
-
text-shadow无法触发CSS过渡，应改用color属性配合transition实现文字颜色渐变；需确保状态变化可被检测（如hover）、避免!important覆盖、正确设置触发选择器与过渡时间（0.2s～0.4s）。
-
Android浏览器（包括Chrome、Firefox等）在页面进入后台或屏幕关闭后会暂停JavaScript执行，导致setInterval+AJAX轮询失效；这不是浏览器Bug，而是系统级资源管控机制，强行绕过既不可靠也不符合最佳实践。
-
页面内跳转需用id属性标记目标并用#链接指向，id须唯一、合法（字母开头，禁空格中文）、与href值完全一致；目标元素必须可见且在DOM中，SPA需手动处理滚动。
-
sticky定位结合flex布局可实现滚动粘性效果，常用于导航栏、侧边栏等场景；需设置top或bottom值且父容器不能有overflow:hidden。
-
卡片重叠时元素消失主因是z-index被父容器层叠上下文截断；需统一设position:relative、避免flex/grid父容器、慎用负z-index，优先用transform偏移并注意点击穿透问题。
-
text-overflow:ellipsis默认仅对单行文本生效，需同时设置overflow:hidden、white-space:nowrap及明确宽度；多行截断依赖-webkit-line-clamp等非标准方案，flex中需设flex-shrink:0和min-width:0才生效。
-
函数声明会被提升，可提前调用；函数表达式不会提升，须定义后调用；箭头函数无this、arguments，不可构造；块级函数声明在严格模式下非法；应据场景选型并重视函数命名。
-
父容器高度塌陷是因浮动元素脱离文档流导致，clearfix通过伪元素触发BFC并清除浮动来解决；标准写法为.clearfix::after{content:"";display:table;clear:both}，需注意兼容性与display设置。
-
padding-bottom是CSS中用于设置元素底部内边距的属性，值可为px、%或em等单位，作用于内容与边框之间，增加内部空白区域。通过设置如padding-bottom:20px，可使内容与容器底部保持距离，常用于文本块或卡片组件中提升可读性和视觉舒适度；需注意其会增加元素总高度（除非box-sizing为border-box），且留白区域会显示背景色，与margin-bottom影响外部布局不同，合理使用能优化页面排版。
-
position不是布局工具，而是用于脱离文档流的精确锚定，仅适用于下拉菜单、气泡提示等满足不参与主内容流、需相对参照物对齐、由交互触发且生命周期短的场景。
-
在Next.jsAppRouter中，应直接在服务端组件（如page.js）中获取数据并作为props传入客户端组件，而非尝试嵌套服务端组件作为子元素——后者会导致React渲染错误。
-
本文详解Firebase安全规则与服务端身份验证的正确配合方式：明确区分客户端无感访问与服务端可信写入，避免误用request.auth!=null导致无法写入，同时杜绝硬编码密钥或开放未授权写权限的风险。
-
BEM修饰符应写为.tab.tab--active，确保基础类与修饰符共存；命名需语义明确、避免嵌套；样式隔离靠唯一块名如.user-tabs__tab.user-tabs__tab--active；注意特异性、构建工具误删及JS操作时机。
-
首先通过SharpKeys修改注册表映射不常用键如ScrollLock为F13，再利用AutoHotkey脚本监听F13并发送HTML或CSS代码片段，例如F13触发插入div标签，F14插入margin:0;padding:0;，从而提升前端编码效率。
