-
使用CSS::after伪元素可为元素添加悬浮装饰，如小圆点、飘带等。1.通过设置content、position及宽高背景属性，在标题上方创建红色小圆点装饰；2.结合transform与@keyframes实现装饰上下浮动动画；3.利用rotate倾斜伪元素内容，在卡片右上角生成“New”斜向飘带效果；4.配合z-index确保装饰层叠在其他内容之上，需父元素定位生效。合理运用可提升界面视觉表现力。
-
滚动监听应绑定到window而非容器元素，因静态页实际滚动主体是window；需用window.pageYOffset和document.documentElement.scrollHeight计算进度，并通过requestAnimationFrame节流更新，同时监听resize修复iOSSafari的height变化问题。
-
动态插入含脚本的HTML时，内联JS不会自动执行或监听DOMContentLoaded，需手动触发事件或安全执行脚本；本文详解两种可靠方案：事件重播与脚本提取执行。
-
align-self没生效最常见原因是父容器未设display:grid/inline-grid；它仅对Grid/Flex直接子元素有效，且受align-items:stretch、子元素尺寸、writing-mode等影响。
-
安卓Chrome/WebView中video元素object-fit:cover渲染偏右是因高DPR下subpixel渲染与裁剪锚点居中导致，需用JS动态计算缩放比例并手动居中校准。
-
使用a标签的href和download属性可创建文件下载链接，如下载并重命名文件，确保同源路径以避免跨域失效，结合target="_blank"和title提升体验。
-
前端JavaScript错误追踪需建立闭环机制，首先通过window.onerror捕获运行时错误，获取错误信息、文件、行列号等数据，注意跨域脚本需配置crossorigin和CORS；其次利用window.onunhandledrejection监听未捕获的Promise异常，统一包装拒绝原因并上报；为还原现场，应采集堆栈信息、sourcemap反查源码位置，并附加浏览器、操作系统、URL、网络状态及操作历史等上下文，同时脱敏敏感信息；上报策略采用批量异步、设置采样率、优先级分级，结合本地缓存实现离线补
-
原生<inputtype="date">宽度无法直接用width:100%撑开，因浏览器为其设定了默认min-width（如Chrome约130px），需显式设置min-width:0和box-sizing:border-box才能生效；Flex布局中同样需min-width:0配合flex:1；Safari兼容性最差，建议优先考虑自定义方案。
-
px是屏幕显示常用单位，1px对应设备像素，适用于网页布局；pt是印刷单位，1pt=1/72英寸，用于打印样式，基于96DPI时1pt≈1.333px。
-
HTML转PDF无法保留交互元素，主流工具生成的PDF均为静态快照；仅wkhtmltopdf支持基础AcroForm表单，pdf-lib可手动添加字段，但需坐标计算与后端解析。
-
HTML5图标显示异常可因路径错误、引用不当或字体未加载，解决方法包括：一、用iconfont类名引用；二、用Unicode字符引用；三、用img标签引用位图；四、内联SVG图标；五、预加载字体文件。
-
Node.js是运行JavaScript的服务器端环境，基于V8引擎，提供文件、网络等API；支持console.log（输出到终端）和require（CommonJS模块加载），但无浏览器API；适用于I/O密集型服务、实时应用及前端工具链。
-
本文教你如何在实现自定义页面过渡动画时，精准排除外部链接和新窗口链接，避免e.preventDefault()和跳转逻辑误作用于target="_blank或跨域链接，确保用户体验与语义正确性。
-
Webpack是“先打包再运行”，Vite是“按需编译+原生ESM运行”；Webpack启动需全量解析与打包，速度慢，Vite借助浏览器原生ESM按需编译，启动近乎秒开。
-
是的，纯CSS选择器能实现手风琴折叠效果。1.利用inputtype="checkbox"的:checked伪类状态；2.结合label标签与兄弟选择器（+或~）控制内容显示；3.使用max-height与overflow:hidden实现展开收缩动画；4.通过transition添加过渡效果；5.可用::after伪元素指示展开状态。该方法优势在于性能好、轻量、支持优雅降级，但无法实现单选模式、动态加载数据及高级ARIA交互。
