-
用DevTools实时调试比手写或在线生成器更可靠，box-shadow参数顺序为h-offsetv-offsetblur-radiusspread-radiuscolor，易错点是混淆后两者，多阴影逗号分隔且从左到右渲染。
-
本文详解如何利用vw/vh视口单位替代固定长度（如rem），使圆形按钮容器随屏幕宽度等比缩放，并确保内部内容居中显示。
-
依赖收集是Vue在读取响应式数据时自动记录依赖关系的过程，通过Observer、Dep和Watcher协同工作，确保数据变化时精准通知对应组件或计算属性更新。
-
推荐使用EventSource（SSE）或WebSocket实现实时物流消息推送，禁用轮询；优先选EventSource（轻量、兼容好、单向），需后端支持text/event-stream；WebSocket适用于需双向通信的场景。
-
纯前端即可实现实时BMI计算：监听input事件，用parseFloat清洗输入，按中国标准分类并toFixed(1)显示，校验非正数防止NaN，textContent更新结果。
-
懒加载是按需触发资源请求，非渲染完统一加载；loading="lazy"有兼容性差、无法监听状态等缺陷，推荐用IntersectionObserver实现，需注意保存引用、设置rootMargin、加载后取消观察及错误处理。
-
PKCE是移动端/SPA中替代client_secret的唯一合规方案，需用加密安全随机源生成43–128字符的code_verifier，经SHA-256哈希和Base64URL编码得code_challenge，授权请求带code_challenge与S256方法，换token时原样提交code_verifier。
-
优化懒加载白屏的核心是让白屏“不可见”或“可接受”，关键靠骨架屏过渡、轻量动效、预加载策略及明确的错误反馈。
-
HTML5中引入icon字体需通过<link>加载CSS文件，再用或<span>加类名渲染；不可用<img>加载字体文件。常见问题包括路径错误、类名不匹配、字体未加载或CSS冲突，应检查Network面板和Computed样式。
-
可用纯HTML+CSS实现Google首页静态视觉结构：顶部导航栏、居中搜索区（max-width:584px+flex居中）、底部flex布局的工具栏，关键用margin:auto、max-width和display:flex控制响应式布局。
-
rotateY翻页动画歪转是因默认变换原点在元素中心，需设transform-origin:leftcenter或050%锚定边缘；左右页需独立旋转并配preserve-3d；卡顿需will-change、requestAnimationFrame及backface-visibility优化；移动端拖拽应分段映射角度并禁用默认滚动。
-
:focus伪类仅在元素获得焦点时生效，常见失效原因包括tabindex="-1"、disabled/readonly属性及旧版Safari对contenteditable支持不一致；border样式需协调width/style/动画，避免跳动，推荐聚焦时改色加阴影；placeholder颜色需与focus状态协同；移动端必须重置-webkit-appearance和appearance并添加touch-action:manipulation。
-
text-orientation仅在writing-mode为vertical-rl或vertical-lr时生效；mixed使CJK直立、ASCII旋转90°，适合现代中文竖排；upright使所有字符直立，易致英文不可读；sideways已废弃。
-
用data-i18n标记元素+JSON语言包管理多语言文本，解耦翻译与结构；优先textContent更新文字，避免innerHTML导致事件丢失；切换时局部刷新并同步更新document.documentElement.lang及Intl格式化实例。
-
HTML气泡需防范XSS：仅允许白名单标签（strong、em、br、a且href限https?），禁用script等执行类标签及on事件；时间戳应作为子元素用margin微调对齐，禁用绝对定位；Safari需用JS而非:hover控制提示；z-index、伪元素定位、scrollHeight计算是跨端兼容关键。
