-
animation-play-state是唯一能真正暂停并从断点继续的原生方案，仅适用于纯CSS@keyframes动画；Canvas、Three.js和requestAnimationFrame动画需手动管理时间戳与状态，否则暂停后会重头开始或跳变。
-
用min-height:100vh撑满视口最可靠，避免height:100vh截断内容；推荐设在主容器而非html/body；配合Flex布局（父容器flex-column+min-height:100vh，主内容flex:1）可实现页脚粘底；iOSSafari需注意vh兼容性，可用JS动态适配或回退height:100%。
-
nonce是CSP中授权内联脚本执行的一次性随机字符串，需服务端同步生成并严格匹配响应头script-src'nonce-xxx'与标签nonce="xxx"属性，否则静默失效。
-
跨域请求因浏览器同源策略被阻止，是安全机制而非bug；解决方式主要有CORS（服务端配置响应头）、JSONP（仅GET，已淘汰）和代理服务器（开发常用），推荐优先配置CORS。
-
z-index在3D场景中失效是正常现象，因浏览器按Z轴实际坐标（如translateZ值）而非z-index数值决定渲染顺序；需通过调整transform中的Z值精确控制前后关系。
-
文字环绕浮动图片需用float:left/right，图片须为普通流内元素并设width和margin；后续块级元素可能清除浮动导致环绕失效，关键在父容器与兄弟元素的样式交互。
-
Nginx能做WebSocket负载均衡，但必须配置proxy_http_version1.1、Upgrade/Connection头透传、proxy_read_timeout与proxy_send_timeout延长至86400、禁用缓冲，并依后端状态选择ip_hash或least_conn算法。
-
grid-column-gap控制列间水平间距，row-gap控制行间垂直间距；前者作用于列轴，后者作用于行轴，两者均推荐用column-gap和row-gap替代以提升跨布局通用性。
-
Flex适用于一维布局（单行/列对齐、分布、顺序调整），Grid专用于二维网格（行列同时控制）；二者分工明确，常嵌套使用——Grid作外层区域划分，Flex处理内部细节对齐。
-
bottom:0只对position为absolute、fixed或sticky的元素生效，且依赖最近已定位祖先（如position:relative）作为参考系；若无，则锚定视口底部。
-
JavaScript中Array.prototype.sort()实现多属性排序需在单个比较函数中按优先级逐级比较：先比部门升序（localeCompare），再比年龄降序（b-a），最后比姓名升序（localeCompare），避免多次sort调用覆盖结果。
-
根本原因是浏览器仅在manifest文件内容发生字节级变化时才检查更新，即使ASP重新生成文件，若资源路径或注释未变，浏览器仍认为无需更新；需确保响应头、格式、动态注释、缓存控制及路径正确，并注意ApplicationCache已被现代浏览器废弃。
-
动态插入<link>标签是真正加载CSS的正确方式，需用createElement创建并设rel="stylesheet"后挂载到head，监听load/error事件；document.styleSheets仅为只读集合，不能用于添加样式。
-
最直接方式是用<ahref="about.html">关于我</a>，路径需区分大小写、不可省略.html后缀，相对路径适用于同目录或子目录，绝对路径以/开头更稳定但本地双击无效；按钮跳转需JS配合location.href。
-
必须以<!DOCTYPEhtml>开头，lang和charset属性不可省略，语义化标签是DOM操作与无障碍基础，表单应优先使用原生type/required，localStorage需注意容量与序列化。
