-
遮罩文字不居中需确保父容器设position:relative；hover闪动应搭配transform过渡与pointer-events控制；flex/Grid下遮罩须显式设宽高；移动端需处理z-index、pointer-events及hover/active/媒体查询兼容。
-
自定义表单控件需通过伪元素+相邻选择器绑定状态，补全浏览器前缀、隐藏原生控件、适配暗色模式与禁用态，并确保可访问性。
-
Vue3响应式数据深拷贝应优先用structuredClone(toRaw(obj))，它支持Map/Set/Date/RegExp等且解决循环引用；老环境可手动递归实现，关键要toRaw解包、WeakMap防循环、类型特判；核心是隔离变更而非单纯拷贝。
-
前端表单验证的五种实现技巧包括：1.使用HTML5内置验证属性；2.使用JavaScript原生验证；3.使用第三方验证库；4.实时验证；5.结合后端验证。这些方法确保用户输入的数据符合预期，防止脏数据进入系统，从而提升用户体验、减少服务器压力并保障数据安全。HTML5提供简单直接的基础验证功能，如required和pattern属性；JavaScript可实现更复杂的自定义逻辑；第三方库如jQueryValidationPlugin简化了规则配置；实时验证通过input事件即时反馈错误；最终仍需后端验证
-
some比forEach+手动中断更合适，因其天然支持短路：一旦某规则返回true即停止遍历，语义清晰且避免冗余校验；而forEach需抛错或标志位，易出错且可读性差。
-
使用CSSGrid可高效实现图文混排。首先构建包含图片和文本的容器，通过display:grid和grid-template-columns设置两栏布局，结合gap与align-items优化间距和对齐；利用:nth-child配合grid-column实现奇偶行图片左右交替；在移动端通过媒体查询改为单列堆叠，并用order调整显示顺序，提升响应式体验。Grid的二维控制能力使布局更灵活精准。
-
color-scheme不是深色模式开关，仅声明支持的系统配色方案；需通过<meta>或:root声明才能使原生控件适配系统偏好，且不影响自定义元素样式。
-
::marker颜色未生效主因是父元素color继承或浏览器兼容性不足；仅Chrome108+、Firefox89+、Safari15.4+支持，且Safari对flex/li包裹等场景静默忽略；它仅支持color、content、font-*等极少数属性，不支持大小、对齐或定位。
-
DataView用于精确控制字节序、偏移量和数据类型读写ArrayBuffer，需先用newDataView(buffer)创建视图，所有读写方法（如getUint16()、setFloat32()）必须显式指定字节偏移量，支持大端/小端配置，适用于协议解析等场景。
-
双击HTML文件可快速打开，但路径含中文、空格或括号易导致Chrome等浏览器加载失败；推荐使用纯英文无空格路径、命令行指定浏览器打开，或VSCode的LiveServer插件启动本地HTTP服务。
-
纯前端无法实现可靠签到打卡，因需防伪造、验时效、留凭证；仅用getCurrentPosition()易被篡改坐标、缓存旧值或伪造时间，须前后端协同校验精度、时间差、设备指纹及地理围栏。
-
:before伪元素必须设置content属性（如content:""）才能渲染，否则不生成节点；需检查position、z-index、overflow、display类型及引号转义等常见问题。
-
用纯HTML+CSS可展示团课表，但选课占位需JavaScript；小屏优先且教室≤5时，table比flex/grid更省心；须用事件委托、数据属性、状态缓存和乐观更新实现防重复提交与实时余量。
-
<p>box-sizing:border-box使width/height包含content、padding和border，避免布局撑开；全局启用推荐{box-sizing:border-box;}或更精确的,::before,::after{box-sizing:border-box;}。</p>
-
图片模糊主因是浏览器缩放插值，默认平滑导致发虚；用image-rendering可强制切换渲染策略：crisp-edges保边缘锐度（推荐像素风/图标），pixelated呈块状（复古/调试），auto为默认平滑。
