-
绝大多数场景下应优先使用overflow-wrap:break-word；word-break:break-all仅适用于无语义的纯展示字段（如Base64、token），因其无视词边界，会破坏中文阅读和链接可点击性。
-
用两个原生range滑块分别控制亮度（0–100）和色温（2700–6500K），通过CSS变量绑定样式，配合input事件实时更新，并用查表法将色温转HSL，同时设置touch-action:none防移动端干扰。
-
响应式grid-template-columns应用minmax(300px,1fr)、repeat(auto-fit,minmax(320px,1fr)))，配合媒体查询兜底；慎用justify-content和grid-area替换需同步更新；subgrid因兼容性差暂不宜生产使用。
-
关键不是加UTF-8，而是整条链路未被任何环节转码或忽略声明：metacharset必须位于head最前，表单需accept-charset，AJAX要设Content-Type头，服务端须强制UTF-8解码，HTTP响应头charset优先级高于meta标签。
-
Chrome105+、Firefox121+、Safari15.4+已默认支持:has()，但Safari15.4–16.3对+/~兄弟选择器支持不稳定；:has()内禁用:hover/:focus/伪元素，:empty恒不匹配；静默失效常见于浏览器不识别、attribute未正确设置或ShadowDOM跨边界；性能敏感场景需慎用，避免嵌套:has()和宽泛选择器。
-
本文详解position:fixed在Tailwind中的正确用法，澄清display:fixed是无效写法，并系统讲解层级遮挡、z-index失效、移动端错位等高频问题的成因与解决方案。
-
:empty只匹配完全无子节点（含空白文本）的元素；换行、空格均会使其失效，而:blank虽可匹配纯空白但仅Safari支持，生产环境需用JS判断textContent.trim()===''。
-
registration.index.add()仅登记URL而不保证离线可访问，需手动精确缓存HTML、确保路径完全一致、服务端允许缓存，并在ServiceWorker的fetch事件中显式处理navigate请求。
-
WebAudio中connect()有三种形式：节点连节点、节点连参数、节点连目的地；混用会导致静音或报错；多路输入自动相加需控幅；所有节点须属同一AudioContext；start()前必须完成connect()且链路终点为destination。
-
Map比普通对象快在支持任意类型键且哈希表实现O(1)查找，而对象仅支持字符串/Symbol键，非字符串键易因toString()冲突；正确序列化多参数需用JSON.stringify或模板字符串；防缓存爆炸应加LRU限制与参数稳定性评估。
-
HTML原生required属性仅对input、select、textarea生效，需避免在自定义组件或hidden/button类型中使用；submit事件被preventDefault拦截时须手动调用checkValidity()；JS提交表单（form.submit()）不会触发校验，必须显式调用checkValidity()或reportValidity()。
-
mask-image没生效主要因三原因：元素无宽高、未设mask-mode或格式不兼容、inline元素未改display；需双写-webkit-mask-image适配Safari；避免与opacity混用。
-
通过监听video元素的loadedmetadata事件可准确获取视频时长，结合preload="metadata"提升加载效率，并利用duration属性获得秒数后格式化为分:秒显示，需注意处理无效资源或直播流导致的NaN与Infinity异常情况。
-
移动端瀑布流最优解是Flex双列+高度预估+异步修正：用宽高比预估初始高度，图片加载后通过style.height和requestAnimationFrame微调，左右列独立维护高度并动态分配新项。
-
Qt的QWebSocket和QWebSocketServer支持跨平台运行（Windows/macOS/Linux），但实际通信成败取决于网络可达性、协议一致性及连接生命周期管理，常见问题包括构建配置遗漏websockets模块、端口冲突、URL协议不匹配、SSL模式混用、防火墙拦截及多线程访问未加锁等。
