-
主题颜色变量未生效的四大原因：变量定义位置错误、构建流程未读取新配置、CSS选择器权重不足、运行时主题切换未清除旧样式缓存，需逐一排查。
-
HTML和JavaScript均无法直接调用或访问TPM安全芯片，HTML无硬件访问能力，JavaScript受浏览器沙箱限制且无原生TPM接口，WebCryptoAPI不依赖TPM，远程认证需后端支持，主流浏览器未提供TPM桥接通道。
-
最稳妥的悬浮球HTML结构是用<button>而非<div>+onclick，如<buttonid="back-to-top"aria-label="返回顶部"title="返回顶部">↑</button>，兼顾可访问性、轻量与兼容性。
-
object-view-box不是标准CSS属性，不存在于任何规范或主流浏览器中；实际应使用container-type+aspect-ratio+@container查询，或object-fit配合aspect-ratio实现容器形状适配。
-
:empty是CSS中用于选择无任何子节点（包括文本、空格、换行）元素的伪类。示例中仅第一个div被选中，后续因含空格或子标签不匹配。使用时需确保元素完全为空，常用于隐藏空容器或提示空输入框，结合.trim()和结构检查可提升准确性。
-
正确处理Flexbox溢出需结合overflow:hidden与flex属性，关键在于设置子元素min-width:0、flex:1及text-overflow:ellipsis，确保内容可收缩且文本溢出时截断，尤其在嵌套布局中更应规范使用以避免撑开容器。
-
最有效方式是在body上设min-width（如320px或768px）并配合viewportmeta标签，同时注意布局上下文——flex需父容器加min-width且子项设flex-shrink:0，grid则用grid-template-columns控制列宽，table需table-layout:fixed才使td的min-width生效。
-
CustomEvent与postMessage结合可实现跨文档通信，发送方通过postMessage传递数据，接收方验证origin后将其转为CustomEvent，从而将外部消息集成到内部事件系统，提升解耦与维护性。
-
可行但有副作用：display:none会使下拉框彻底脱离渲染树，无法交互、不可见、读屏器不可识别，且表单提交时值仍存在；推荐结合disabled属性使用以确保安全。
-
只有当元素频繁动画且已确认卡顿时才用will-change，须配合transform/opacity并动态启停；滥用会增内存开销、触发回流或过度分层。
-
正确做法是将REM基准值定义为无单位SCSS变量（如$font-scale:16），在:root中转为px，并用rem-calc()函数统一计算rem值，避免硬编码和JS动态设置冲突。
-
JavaScript事件是用户或浏览器操作触发的信号，通过addEventListener为DOM元素添加监听器以响应click、input、keydown等事件，支持多监听、捕获/冒泡控制及事件委托。
-
本文详解为何inline-block元素在设置固定宽度（如500px）时仍会换行堆叠，并推荐使用现代CSSFlexbox布局实现可靠、响应式的左右并排布局，同时兼顾间距控制与适配性。
-
list-style在flex容器中失效是因为flexitem默认display为block/inline而非list-item，导致项目符号被忽略；应改用::before伪元素或CSScounters实现符号/编号，或直接用div+role语义化替代。
-
发布订阅模式通过事件中心实现组件间解耦，支持跨层级通信。使用EventHub类可实现on、emit、off方法，用于订阅、发布和取消事件。组件A触发事件，组件B监听并响应，无需直接引用。建议统一事件常量、及时取消订阅以防内存泄漏，可扩展once功能，大型项目推荐mitt等库。该模式适用于非父子组件通信与全局状态通知，提升代码可维护性。
