-
核心是利用本地存储和ServiceWorker实现离线表单。首先通过localStorage或IndexedDB缓存表单数据，结合navigator.onLine和网络请求检测离线状态；在离线时，ServiceWorker拦截POST请求，将数据存入IndexedDB队列，并返回提示响应；当网络恢复（online事件触发），ServiceWorker自动重试提交队列中的表单，成功后清除数据并可发送通知反馈用户；同时需对敏感数据加密、控制作用域、处理版本冲突以保障安全与一致性。
-
wkhtmltopdf是最稳的本地PDF生成工具，兼容性好、控制精细，需加--enable-local-file-access和中文字体参数；puppeteer更灵活但重，weasyprint最轻量但不支持JS。
-
<p>box-sizing属性用于控制元素尺寸计算方式，content-box（默认）仅宽高包含内容，padding和border会增加总尺寸；border-box则让宽高包含内容、内边距和边框，推荐使用以避免布局溢出。通过*{box-sizing:border-box;}可全局设置，使布局更可预测，尤其在响应式设计中更易控制元素排列。例如两个50%宽度的盒子若设padding，在content-box下会换行，而border-box中仍并排显示。实际示例：.box1（content-box）
-
Vue插槽默认内容是组件未接收插槽内容时自动渲染的备用内容，通过在<slot>标签内编写实现，具名插槽和作用域插槽同样支持，默认内容仅在slot标签被求值且无父组件传入时生效。
-
scale动画需配合transition才能产生缓动效果，transition必须写在默认状态且仅过渡transform更安全；transform-origin影响缩放锚点但无需加入transition；需兼顾:hover/:focus/:focus-visible以保障可访问性；非整数scale可能导致模糊，可加will-change或translateZ(0)优化；移动端应设touch-action:manipulation避免与双击缩放冲突。
-
点击外部不关闭popover的根源是事件监听未绑定在document上，应使用document.addEventListener并配合contains()判断点击目标，同时监听touchstart和click双事件以兼容iOSSafari。
-
根本原因是html2canvas默认按视口截图而非内容宽度，需设容器width为scrollWidth、禁用fixed元素、用break-inside:avoid控制分页；puppeteer需禁用preferCSSPageSize、用@page和固定px单位；移动端要移除viewport标签并替换响应式单位为px。
-
overflow属性通过visible、hidden、scroll、auto控制内容溢出显示；2.overflow:hidden可解决浮动塌陷并触发BFC；3.结合text-overflow与white-space实现单行或多行文本省略；4.优先使用auto避免多余滚动条，弹窗时可用overflow:hidden防止背景滚动。
-
合理使用grid-template-areas可解决多层嵌套CSS网格布局的混乱问题，通过为每层容器独立定义语义化命名区域，如header、main、footer，并确保子网格不继承父级行列结构，避免深层元素误入外层网格；例如父级用"headhead""navmain"划分区块，子网格在main内再定义"content""ad"，使各层布局解耦；关键在于每层仅管理直接子元素，不跨容器定位，用padding或margin替代跨轨道调整，从而提升可读性与可维护性，防止错位。
-
WebSocket连接失败：检查newWebSocket()的URL格式浏览器里newWebSocket()报错“Errorinconnectionestablishment”，八成是协议或地址写错了。WebSocket不是HTTP，不能用http://或漏掉协议前缀。正确写法必须是wss://example.com/ws（生产）或ws://localhost:8080（开发），ws和wss都要小写，且不能带路径参数如?token=xxx（得走head
-
图片不能直接存数据库，须转二进制（BLOB）或存路径；主流做法是存路径，上传时清洗文件名、用参数化SQL、删记录前同步删文件，并统一媒体访问路由。
-
backdrop-filter无法用@keyframes实现平滑动画，因其被CSS规范定义为非可动画属性，Chrome、Safari、Firefox均不支持过渡；可行方案是固定backdrop-filter值，仅对opacity或transform动画。
-
:empty是CSS中用于选择无任何子节点（包括文本、空格、换行）元素的伪类。示例中仅第一个div被选中，后续因含空格或子标签不匹配。使用时需确保元素完全为空，常用于隐藏空容器或提示空输入框，结合.trim()和结构检查可提升准确性。
-
JavaScript异步编程历经回调函数、Promise到Async/Await的演进。Promise通过pending、fulfilled、rejected三种状态解决回调地狱，支持.then()和.catch()链式调用，并提供Promise.all()等方法实现并发控制；Async/Await基于Promise，以同步语法书写异步代码，提升可读性，需配合try/catch处理错误，且await只能在async函数内使用。实际开发中应避免无依赖请求的串行执行，推荐Promise.all()并发处理，并
-
本文介绍如何在Svelte中优雅地实现基于数据状态（如数值范围）的动态class赋值，替代冗长的{#if}嵌套，提升可读性、可维护性与性能。
