-
应使用rgba()或hsla()设置背景透明度，而非opacity；前者仅影响背景色，后者使整个元素及子元素变透明，导致内容发灰。
-
当两个组件为兄弟关系（同级、无嵌套）且需跨组件触发行为时，推荐使用forwardRef+useImperativeHandle暴露可控方法，避免冗余状态提升和副作用监听，实现清晰、高效、可维护的通信。
-
严格模式将静默失败转为报错、模糊行为转为确定规则：未声明变量赋值报ReferenceError；函数参数/对象属性重复触发SyntaxError；普通函数中this为undefined；禁用with、eval泄漏、arguments.callee等危险特性。
-
可通过CSS的border、outline、单侧border属性、清除默认边框及box-shadow五种方式为HTML5元素添加边界效果：border在内容外绘边框并影响布局；outline在边框外绘轮廓线且不占空间；border-top等可单独设置某一边；outline:none或border:none可移除默认边框；box-shadow用零偏移零模糊加扩展半径模拟边界，兼容圆角。
-
auto-fill保留空轨道适合hover动画，auto-fit收缩空列更省空间；minmax(200px,1fr)实现响应式列宽，需配合display:grid和合理父容器宽度；clamp()可替代minmax()第一参数实现平滑响应式，但需注意Safari兼容性。
-
轮播图组件通过HTML结构、CSS样式和JavaScript逻辑实现自动播放、手动切换与指示器功能，支持悬停暂停和多实例复用，适用于网页图片展示。
-
混用font-size的%和px会破坏继承链，导致字体大小计算失控；应锚定根字号，组件内用em/%缩放，line-height必须用无单位值。
-
长文本溢出容器不换行的根源是white-space被设为nowrap或pre；中文长串需用overflow-wrap:break-word或word-break:break-all；Flex/Grid子项须加min-width:0才能正常折行。
-
本文介绍如何使用原生JavaScript的事件委托机制，精准移除触发事件的按钮所在最近的指定父容器（如.item），避免ID冲突与重复绑定问题，并支持动态添加的元素。
-
本文详解如何使用Yup的ref()和notOneOf()实现密码字段对用户名的动态校验，避免密码中包含用户名，并结合正则确保密码符合复杂度要求。
-
本文详解如何在Angular中正确使用[innerHTML]渲染含HTML标签的字符串（如段落、换行、超链接），同时避免被Angular默认的DOM安全策略拦截，并说明为何直接绑定字符串无效、如何通过DomSanitizer安全绕过、以及如何兼顾可读性与安全性。
-
浮动元素不换行的根本原因是“没地方换”，即当前行剩余空间不足或父容器布局模型（如flex/grid）使float失效，而非CSS书写错误。
-
class和id的核心差异是唯一性与复用性：1.id具有唯一性，一个页面中只能出现一次，用于唯一标识元素，适合锚点跳转、JavaScript精确操作和表单关联；2.class具有复用性，可被多个元素共享，一个元素也可拥有多个class，适合样式复用、语义化分组和JavaScript批量操作；3.从CSS特异性看，id选择器权重为100，class为10，id优先级更高；4.现代开发中应优先使用class，因其更利于组件化、模块化和维护，仅在需要唯一标识时使用id。
-
HTML5不支持RTSP协议和原生录屏；可行方案仅有服务端转存（如FFmpeg拉流录MP4/HLS）或客户端MediaRecorder录制WebRTC流；hls.js等无法直接录制，且需注意权限、跨域、内存溢出等问题。
-
JSON是轻量级文本交换格式，非JavaScript对象或类，仅含parse()和stringify()两个静态方法；parse()严格校验标准JSON语法，stringify()忽略函数/undefined/Symbol/循环引用，且fetch的.json()不可重复调用。
