-
Autoprefixer是基于caniuse数据库的CSS后处理器，仅在目标浏览器实际需要时添加前缀；它不能替代手写前缀的全部场景，如partialsupport属性（appearance）或无前缀新属性（inset）不会处理。
-
最安全的非前端改样式方法是用DevTools实时调试：F12→Elements→选元素→Styles面板双击修改，不碰源码、不触发编译、不污染Git；优先调color、padding等即时生效属性，慎用!important仅作临时验证。
-
原生checkbox不能直接用CSS改样式，因其渲染由浏览器硬编码；需保留原生input并用伪元素覆盖视觉层，同时确保可访问性、焦点管理与状态同步。
-
必须启用ENABLE_EMBEDDING=true并重启服务，嵌入URL需用SECRET_KEY_BASE签名，iframe要配置CSS响应式及权限策略，参数须严格匹配变量名与格式。
-
JavaScriptWebWorkers是浏览器提供的后台线程机制，用于执行计算密集型任务而不阻塞主线程。它通过postMessage进行消息通信，适用于大数据处理、图像分析、加密解密等场景，但不可操作DOM，需手动终止以避免内存泄漏。
-
split()方法根据分隔符将字符串拆分为数组。1.separator参数可为字符串或正则，决定分割位置；2.limit参数限制返回数组长度；3.使用正则可处理复杂分隔模式，如多个分隔符或捕获组保留分隔符信息；4.分隔符不存在时返回原字符串数组，为空字符串时逐字符分割；5.结合map、filter等方法清洗和转换分割后的数据以满足实际需求。
-
Array.from()是将伪数组转换为真数组最简洁推荐的方式，能处理arguments、NodeList等伪数组并支持映射操作。
-
使用Flexbox实现固定底部栏最稳妥，通过设置容器min-height:100vh和flex:1使主内容占剩余空间，将footer推至底部，适用于内容较少或较多的场景。
-
优先使用内联<svg>而非<img>，因其支持CSS动态变色、适配高清屏与深色模式；语义化结构应为<spanrole="img"aria-label="VIP会员"><svg>...</svg></span>，确保无障碍可读。
-
WebSocket用于客户端与服务器双向通信，如聊天室；WebRTC实现浏览器间点对点音视频及数据传输，需信令服务器辅助建立连接。
-
background-color:rgba()仅使父元素背景透明，子元素不受影响；需整体透明用opacity，精准控制则分别设置各属性的rgba()；毛玻璃效果需backdrop-filter配合transparent背景。
-
:hover伪类需配合可交互元素生效，常见失效原因包括pointer-events:none、父级遮挡或元素无尺寸；transition应指定具体属性而非all；移动端需用:focus或JS替代:hover。
-
fonttext类与icon图标结合可高效构建美观界面。通过UI框架预设类控制字体样式，如text-lg、font-bold、text-blue-600；引入FontAwesome等图标库后，使用fasfa-user类插入图标；二者结合时，用mr-2添加间距，align-middle对齐，确保图标加载和可访问性，适用于按钮、导航等组件，提升开发效率。
-
:nth-child(2n)选不到目标行是因为它按父元素下所有子元素的物理顺序计数，不区分标签类型；若存在thead、tbody或div等干扰节点，序号即错乱。
-
用::before伪元素画箭头需设content:""、position:absolute、width:0、height:0，仅保留单方向实色边框（如border-top:8pxsolid#333）与另三向透明边框，利用边框交汇“挤”出三角形；箭头方向由实色边框方向决定，水平居中用left:50%+transform:translateX(-50%)。
